canvas中普通动效与粒子动效的实现代码示例

canvas用于在网页上绘制图像、动画,可以将其理解为画布,在这个画布上构建想要的效果。

canvas可以绘制动态效果,除了常用的规则动画之外,还可以采用粒子的概念来实现较复杂的动效,本文分别采用普通动效与粒子特效实现了一个简单的时钟。

普通时钟

普通动效即利用canvas的api,实现有规则的图案、动画。

效果

该效果实现比较简单,主要分析一下刻度与指针角度偏移的实现。

绘制刻度

此例为小时刻度的绘制:表盘上共有12个小时,Math.PI为180°,每小时占据30°。
.save()表示保存canvas当前环境的状态,在此基础上进行绘制。绘制完成之后,返回之前保存过的路径状态和属性。

分钟刻度同理,改变角度与样式即可。

  // 小时时间刻度
  offscreenCanvasCtx.save();
  for (var i = 0; i < 12; i++) {
    offscreenCanvasCtx.beginPath();
    // 刻度颜色
    offscreenCanvasCtx.strokeStyle = '#fff';
    // 刻度宽度
    offscreenCanvasCtx.lineWidth = 3;
    // 每小时占据30°
    offscreenCanvasCtx.rotate(Math.PI / 6);
    // 开始绘制的位置
    offscreenCanvasCtx.lineTo(140, 0)
    // 结束绘制的位置;
    offscreenCanvasCtx.lineTo(120, 0);
    // 绘制路径
    offscreenCanvasCtx.stroke();
  }
  offscreenCanvasCtx.restore();

指针指向

以秒针为例:获取当前时间的秒数,并计算对应的偏移角度

  var now = new Date(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hr = now.getHours();
  hr = hr > 12 ? hr - 12 : hr;
  
  //秒针
  offscreenCanvasCtx.save();
  offscreenCanvasCtx.rotate(sec * (Math.PI / 30));
  ......
  offscreenCanvasCtx.stroke();

粒子动效

canvas可以用来绘制复杂,不规则的动画。粒子特效可以用来实现复杂、随机的动态效果。

粒子,指图像数据imageData中的每一个像素点,获取到每个像素点之后,添加属性或事件对区域内的粒子进行交互,达到动态效果。

效果

粒子获取

以下图的图片转化为例,该效果是先在canvas上渲染图片,然后获取文字所在区域的每个像素点。

let image = new Image();
  image.src='http://www.cppcns.com/web/image/logo.png';
  let pixels=[]; //存储像素数据
  let imageData;
  image.width = 300;
  image.height = 300
  // 渲染图片,并获取该区域内像素信息
  image.onload=function(){
    ctx.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height);
    imageData=http://www.cppcns.com/web/html5/ctx.getImageData((canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height); //获取图表像素信息
 //绘制图像
  };

像素信息

图片的大小为300*300,共有90000个像素,每个像素占4位,存放rgba数据。

粒子绘制

 function getPixels(){
    var pos=0;
    var data=http://www.cppcns.com/web/html5/imageData.data; //RGBA的一维数组数据
    //源图像的高度和宽度为300px
    for(var i=1;i<=image.width;i++){
      for(var j=1;j<=image.height;j++){
        pos=[(i-1)*image.width+(j-1)]*4; //取得像素位置
        if(data[pos]>=0){
          var pixel={
            x:(canvas.width-image.width)/2+j+Math.random()*20, //重新设置每个像素的位置信息
            y:(canvas.height-image.height)/2+i+Math.random()*20, //重新设置每个像素的位置信息
            fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')'
          }
          pixels.push(pixel);
        }
      }
    }
  }
  function drawPixels() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvas.width,canvas.height);
    var len = pixels.length, curr_pixel = null;
    for (var i = 0; i < len; i++) {
      curr_pixel = pixels[i];
      ctx.fillStyle = curr_pixel.fillStyle;
      ctx.fillRect(curr_pixel.x, curr_pixel.y, 1, 1);
    }
  }

粒子时钟

canvas中普通动效与粒子动效的实现代码示例

扫一扫手机访问