Canvas 有毛刺的计时器

glitched timer,模仿电视播放时卡壳闪屏的效果。

glitch,timer

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2028
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function(){
  /* 
    :glitchBox
  */
  function glitchBox(canvas){
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.width = canvas.width;
    this.height = canvas.height;
  }
  glitchBox.prototype.glitchWave = function(renderLineHeight, cuttingHeight){
    var image = this.ctx.getImageData(0, renderLineHeight, this.width, cuttingHeight);
    this.ctx.putImageData(image, 0, renderLineHeight - 10);
  };
  glitchBox.prototype.glitchSlip = function(waveDistance){
    var startHeight = this.height * Math.random();
    var endHeight = startHeight + 30 + (Math.random() * 40);
    for(var h = startHeight; h < endHeight; h++){
      if(Math.random() < 0.1)h++;
        var image = this.ctx.getImageData(0, h, this.width, 1);
        this.ctx.putImageData(image, Math.random()*waveDistance-(waveDistance/2), h); 
    }
  };
  glitchBox.prototype.glitchSlipColor = function(waveDistance){
    var startHeight = this.height * Math.random();
    var endHeight = startHeight + 30 + (Math.random() * 40);
    var imageData = this.ctx.getImageData(0, startHeight,
                                          this.width, endHeight);
    var data = imageData.data;
    var r = g = b = 0;
    for(var i = 0, len = imageData.width * imageData.height; i<len; i++){
      if(i % imageData.width ==0){
        r = i + Math.floor((Math.random() -0.5) * waveDistance);
        g = i + Math.floor((Math.random() -0.5) * waveDistance);
        b = i + Math.floor((Math.random() -0.5) * waveDistance);
      }
      data[i*4] = data[r*4];      //r
      data[i*4 + 1] = data[g*4 + 1];  //g
      data[i*4 + 2] = data[b*4 + 2]; //b
//      data[i*4 + 3] = data[a*4 + 3];  //a
    }
    this.ctx.putImageData(imageData, 0, startHeight);
  };
  glitchBox.prototype.glitchFillRandom = function(fillCnt, cuttingMaxHeight){
    var cw = this.width;
    var ch = this.height;
    for(var i = 0; i< fillCnt; i++){
      var rndX = cw * Math.random();
      var rndY = ch * Math.random();
      var rndW = cw * Math.random();
      var rndH = cuttingMaxHeight * Math.random();
      var image = this.ctx.getImageData(rndX,rndY,rndW, rndH);
      this.ctx.putImageData(image, (rndX* Math.random())%cw, rndY);
    }
  }
  
  
  /* 
    :canvasView
  */  
  function canvasView(canvas, FPS, loopFPS){
    if(canvas == null){
      canvas = document.createElement('canvas');
    }
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.width = 0;
    this.height = 0;
    this.GRID_X = 50;
    this.GRID_Y = 50;
    this.frm = 0;
    this.FPS = FPS;
    this.loopFPS = loopFPS;
    this.bgCanvasImage;
  }
  canvasView.prototype.initCanvas = function(){
    this.canvas.width = this.width = window.innerWidth;
    this.canvas.height = this.height = window.innerHeight;
    this.ctx.clearRect(0, 0, this.width, this.height);
    this.ctx.globalAlpha = 1;
  }

canvasView.prototype.drawCanvas = function(){
    var cw = this.width;
    var ch = this.height;
    var ctx = this.ctx;
    this.drawBG();
    // circle
    ctx.strokeStyle = 'rgba(200,255,255,1)';
    ctx.beginPath();
    ctx.lineWidth = 10;
    var taskFPS = (this.frm % this.loopFPS)/this.loopFPS;
    ctx.arc(cw/2, ch/2, cw*0.4705, 0, 2*Math.PI*taskFPS, false);
    ctx.stroke();
    // bar
    ctx.fillStyle = this.makeGradientStyle();
    var taskFPS = this.frm % this.loopFPS;
    ctx.fillRect(cw/this.loopFPS * taskFPS, ch*0.45,
                 cw*0.5, ch*0.1);
    ctx.fillRect(cw/this.loopFPS * taskFPS - cw, ch*0.45,
                 cw*0.5, ch*0.1);
    // text
    ctx.fillStyle = '#000000';
    ctx.textAlign = "center";
    ctx.textBaseline = "top";
    ctx.font = "14px 'Futura'";
    ctx.fillText("frame : " + this.frm,
                 cw/2, ch*0.855, 500);
    ctx.fillText("width : " + cw + " / height : " +   ch + "px",
                 cw/2, ch*0.89, 500);
    ctx.font = "24px 'Futura'";
    ctx.fillText(yyyymmdd(), cw/2, ch*0.31, 500);
    ctx.font = "8px 'Futura'";
    ctx.fillText("     year        month      day", cw/2, ch*0.36, 500);
    ctx.font = "110px 'Futura'";
    ctx.fillText(hhmissms(), cw/2, ch*0.36, 640);
    ctx.font = "8px 'Futura'";
    ctx.fillText("hour", cw/2 - 260, ch*0.58, 100);
    ctx.fillText("minute", cw/2 - 110, ch*0.58, 100);
    ctx.fillText("second", cw/2 + 40, ch*0.58, 100);
    ctx.fillText("milli second", cw/2 + 230, ch*0.58, 100);
  }
  canvasView.prototype.drawBG = function(){
    if(this.bgCanvasImage == null){
      var cw = this.width;
      var ch = this.height;
      var ctx = this.ctx;
      // set grid
      this.setGrid();
      // set circle
      ctx.strokeStyle = 'rgba(30,30,30,0.8)';
      ctx.beginPath();
      ctx.lineWidth = 40;
      ctx.arc(cw/2, ch/2, cw/2, 0, Math.PI*2, false);
      ctx.stroke();
      ctx.strokeStyle = 'rgba(30,30,30,0.8)';
      ctx.beginPath();
      ctx.lineWidth = 10;
      ctx.arc(cw/2, ch/2, cw*0.460, 0, Math.PI*2, false);
      ctx.stroke();
      // set slash
      ctx.lineWidth = 0.5;
      ctx.strokeStyle = 'rgba(0,0,0,0.15)';
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(cw,ch);
      ctx.stroke();
      ctx.moveTo(cw, 0);
      ctx.lineTo(0, ch);
      ctx.stroke();
      // save Image
      this.bgCanvasImage = ctx.getImageData(0, 0,cw,ch);
    }
    // put saved image
    this.ctx.putImageData(this.bgCanvasImage, 0,0);
  }
 
  canvasView.prototype.setGrid = function(){
    var pointR = 0.6;
    var pointBigR = 1.2;
    var detailCeparetCnt = 5;
//    var gridW = this.width / this.GRID_X*10;
//    var gridH = this.height / this.GRID_Y*10;
    var gridW = 100;
    var gridH = 100;
    
    // detailDot
    var patternCanvas1 = document.createElement("canvas");
    patternCanvas1.width = gridW/detailCeparetCnt;
    patternCanvas1.height = gridH/detailCeparetCnt;
    var pCtx = patternCanvas1.getContext("2d");
    pCtx.arc(gridW/detailCeparetCnt/2,gridH/detailCeparetCnt/2,
             pointR,0,Math.PI * 2);
    pCtx.fillStyle = "rgba(0,0,0,0.2)";
    pCtx.fill();

// grid+
    var patternCanvas2 = document.createElement("canvas");
    patternCanvas2.width = gridW;
    patternCanvas2.height = gridH;
    var pCtx2 = patternCanvas2.getContext("2d");
    pCtx2.arc((gridW/2),(gridH/2),pointBigR,0,Math.PI * 2);
    pCtx2.fillStyle = "rgba(0,0,0,0.5)";
    pCtx2.fill();
    pCtx2.lineWidth = 0.2;
    pCtx2.strokeStyle = 'rgba(0,0,0,0.1)';
    pCtx2.moveTo(0, (gridH/2));
    pCtx2.lineTo(gridW, (gridH/2));
    pCtx2.stroke();
    pCtx2.moveTo((gridW/2), 0);
    pCtx2.lineTo((gridW/2), gridH);
    pCtx2.stroke();

pCtx2.fillStyle = pCtx2.createPattern(patternCanvas1, "repeat");
    pCtx2.fillRect(0, 0,patternCanvas2.width, patternCanvas2.height);

var ctx = this.ctx;
    ctx.fillStyle = ctx.createPattern(patternCanvas2, "repeat");
    ctx.fillRect(0, 0,this.width, this.height);
    
  }
  canvasView.prototype.makeGradientStyle = function(){
    var grad  = this.ctx.createLinearGradient(0,0, this.width,0);
    grad.addColorStop(0,'rgb(220, 0, 0)');
    grad.addColorStop(0.5,'rgb(220, 0, 220)');
    grad.addColorStop(1,'rgb(0, 0, 220)');
    return grad;
  }

// other
  // 1桁の数字を0埋めで2桁にする
  var toDoubleDigits = function(num) {
    num += "";
    if (num.length === 1)num = "0" + num;
   return num;     
  };
  var toTripleDigits = function(num) {
    num += "";
    if (num.length === 1)num = "0" + num;
    if (num.length === 2)num = "0" + num;
   return num;
  };

// 日付をYYYY/MM/DD HH:DD:MI:SS形式で取得
  var yyyymmdd = function() {
    var date = new Date();
    var yyyy = date.getFullYear();
    var mm = toDoubleDigits(date.getMonth() + 1);
    var dd = toDoubleDigits(date.getDate());
    return yyyy + '/' + mm + '/' + dd;
  };
  var hhmissms = function() {
    var date = new Date();
    var hh = toDoubleDigits(date.getHours());
    var mi = toDoubleDigits(date.getMinutes());
    var ss = toDoubleDigits(date.getSeconds());
    var ms = toTripleDigits(date.getMilliseconds())
    return hh + ':' + mi + ':' + ss + ':' + ms;
  };
  var getRandOffsetNum = function(){
    var num = Math.random() * 1800 + 250;
    if(Math.random() < 0.6){
      num *= -1;
    }
    return num;
  }

编译

CSS

HTML

glitched timer,模仿电视播放时卡壳闪屏的效果。

glitch,timer

编辑器支持Emmet

快捷键

glitched timer,模仿电视播放时卡壳闪屏的效果。

glitch,timer

React 有趣的水位式时针显示效果

HTML5 WebGL屏幕闪屏（电视机花屏）动画特效的着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：