欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  实现原理
 
  通过不断的改变圆的半径大小,不断重叠达到运动的效果,在运动的过程中,设置当前canvas的透明度 context.globalAlpha=0.95 ,使得canvas上的圆逐渐透明直至为0,从而实现这种扩散、渐变的效果。
 
  实现方法一
 
  1. 关键技术点
 
  context.globalAlpha = 0.95 ; //设置主canvas的绘制透明度。
 
  创建临时canvas来缓存主canas的历史图像,再叠加到主canvas上。
 
  2. 绘制过程
 
  首先,我们先来写一个绘制圆的方法:
 
  //画圆
 
  var drawCircle = function() {
 
  context.beginPath();
 
  context.arc(150, 100, radius, 0, Math.PI * 2);
 
  context.closePath();
 
  context.lineWidth = 2; //线条宽度
 
  context.strokeStyle = 'rgba(250,250,50,1)'; //颜色
 
  context.stroke();
 
  radius += 0.5; //每一帧半径增加0.5
 
  //半径radius大于30时,重置为0
 
  if (radius > 30) {
 
  radius = 0;
 
  }
 
  };
 
  然后,我们创建一个临时canvas用来缓存主canvas上的历史图像,设置主canvas的透明度 context.globalAlpha=0.95 (关键一步),在每次调用 drawCircle 方法绘制一个新圆之前都把主canvas上的图像,也就是之前的图像给绘制到临时的canvas中,等 drawCircle 方法绘制完新圆后,再把临时canvas的图像绘制回主canvas中。
 
  核心代码如下:
 
  //创建一个临时canvas来缓存主canvas的历史图像
 
  var backCanvas = document.createElement('canvas'),
 
  backCtx = backCanvas.getContext('2d');
 
  backCanvas.width = width;
 
  backCanvas.height = height;
 
  //设置主canvas的绘制透明度
 
  context.globalAlpha = 0.95;
 
  //显示即将绘制的图像,忽略临时canvas中已存在的图像
 
  backCtx.globalCompositeOperation = 'copy';
 
  var render = function() {
 
  //1.先将主canvas的图像缓存到临时canvas中
 
  backCtx.drawImage(canvas, 0, 0, width, height);
 
  //2.清除主canvas上的图像
 
  context.clearRect(0, 0, width, height);
 
  //3.在主canvas上画新圆
 
  drawCircle();
 
  //4.等新圆画完后,再把临时canvas的图像绘制回主canvas中
 
  context.drawImage(backCanvas, 0, 0, width, height);
 
  };
 
  实现方法二
 
  与上一种方法相比,这种方法更加简单,同样是用到了透明度逐渐减小直到为0的原理,不同的是这里并没有创建临时canvas,而是运用了 context.globalCompositeOperation 属性值 source-over 和 destination-in 来配合使用, 查看globalCompositeOperation属性介绍
 
  核心代码如下:
 
  var render = function() {
 
  //默认值为source-over
 
  var prev = context.globalCompositeOperation;
 
  //只显示canvas上原图像的重叠部分
 
  context.globalCompositeOperation = 'destination-in';
 
  //设置主canvas的绘制透明度
 
  context.globalAlpha = 0.95;
 
  //这一步目的是将canvas上的图像变的透明
 
  context.fillRect(0, 0, width, height);
 
  //在原图像上重叠新图像
 
  context.globalCompositeOperation = prev;
 
  //在主canvas上画新圆
 
  drawCircle();
 
  };
 
  地图上的应用
 
  这里我采用的是第二种方式,将扩散、渐变效果运用到了百度地图上,感觉还比较炫, 查看更多demo
 
  圆形扩散动画
 
  运动轨迹动画
 
  总结
 
  方法一、二都能实现同样的效果,如果动画绘制、操作canvas比较频繁,建议采用第一种方式,用临时canvas来缓存历史图像,效率更高。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h62432.shtml