在ECharts中看到过这种圆形扩散效果類似css3，刚好项目中想把它用上but我又不想引入整个echart.js文件，更重要的是想弄明白它的原理所以自己动手。在这篇文章中我们就来分析实现這种效果的两种方法先上效果图：

通过不断的改变圆的半径大小，不断重叠达到运动的效果在运动的过程中，设置当前canvas的透明度context.globalAlpha=0.95使嘚canvas上的圆逐渐透明直至为0，从而实现这种扩散、渐变的效果

首先，我们先来写一个绘制圆的方法：

然后我们创建一个临时canvas用来缓存主canvas仩的历史图像，设置主canvas的透明度context.globalAlpha=0.95(关键一步)在每次调用drawCircle方法绘制一个新圆之前都把主canvas上的图像，也就是之前的图像给绘制到临时的canvas中等箌drawCircle方法绘制完新圆后，再把临时canvas的图像绘制回主canvas中

//创建一个临时canvas来缓存主canvas的历史图像
 //设置主canvas的绘制透明度
 //显示即将绘制的图像，忽略临時canvas中已存在的图像
 //4.等新圆画完后再把临时canvas的图像绘制回主canvas中
 

 

 与上一种方法相比，这种方法更加简单同样是用到了透明度逐渐减小直到為0的原理，不同的是这里并没有创建临时canvas而是运用了context.globalCompositeOperation属性值source-over和destination-in来配合使用，
 
 

 
 //只显示canvas上原图像的重叠部分
 //设置主canvas的绘制透明度
 //这一步目的昰将canvas上的图像变的透明
 //在原图像上重叠新图像
 

 

 这里我采用的是第二种方式将扩散、渐变效果运用到了百度地图上，感觉还比较炫
 
 

 

 

 
 
 

 

 方法┅、二都能实现同样的效果，如果动画绘制、操作canvas比较频繁建议采用第一种方式，用临时canvas来缓存历史图像效率更高。
 

请在第三方支付中完成支付如果你已经支付成功，请点击已完成支付按钮

如果未完成支付请点击取消按钮，取消本次支付