介绍
我在ECharts上看到过这个圆形扩散效果。 与css3相似。 我正好想在项目中使用那个。 but我又不想导入整个echart.js文件，最重要的是想理解其原理，所以自己动手。 本文分析了实现这一效果的两种方法。 先看看效果图吧。
实现原理
通过不断变化圆的半径大小，持续重叠，可以获得运动的效果。 在运动过程中，可以通过设定当前canvas的透明度context.globalAlpha=0.95使canvas上的圆逐渐透明直到0来获得此漫反射和渐变效果。
实现nqdzxc
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.stroke style=' rgba (250，250，50，1 )； //颜色
context.stroke (；
radius =0.5； //每帧半径增加0.5
//半径radius大于30时，重置为0
if(radius30 ) {
radius=0；
}
(；
接下来，创建临时的canvas来缓存主canvas的历史图像，设置主canvas的透明度context.globalAlpha=0.95 (键步)，并在每次调用drawCircle方法时进行更新
核心代码如下所示。
//创建临时canvas以缓存主canvas历史图像
varbackcanvas=document.createelement (' canvas )、
back CTX=back canvas.get context (' 2d )；
backCanvas.width=width；
backCanvas.height=height；
//设置主canvas的绘制透明度
context.globalAlpha=0.95；
//显示要绘制的图像并忽略临时canvas中已存在的图像
back CTX.globalcompositeoperation=' copy '；
var render=function
//1 .将主canvas的图像临时缓存在canvas中
backCTX.Drawimage(canvas，0，0，width，height )；
//2 .清除主canvas的图像
context.clear rect (0，0，width，height )；
//3 .在主canvas上画一个新圆
drawCircle (；
//4 .画出新的圆后，将虚拟canvas的图像描绘回主canvas
context.drawimage(backcanvas，0，0，width，height )；
(；
实现方法2
与以前的方法相比，该方法更简单，使用了透明度逐渐减小直到0的原理，但这里不创建临时canvas，而是使用context.globalcompositeoperation属性值source-over和destination-destion
核心代码如下所示。
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 (；
(；
地图上的APP图标
这里采用了第二种方式。 我在百度地图上应用了扩散、渐变效果。 让我们看更多的demo
圆形扩散动画
运动轨迹动画
总结
nqdzxc，2具有类似的效果，但如果经常使用动画绘制和处理canvas，则建议使用第一种方法在临时canvas上缓存历史图像。 更有效率。
本文的前端(javascript )相关术语：javascript是什么？ javascript下载javascript权威指南javascript基础教程javascript正则表达式javascript设计模式javascript高级编程非常熟悉javascript
主题：百度、
分页符： 12
转载请注明
正文标题： canvas动画——圆形扩散，运动轨迹
本站链接：
要共享，请单击：
CodeSecTeam转载的文章旨在通过其他媒体和其他官方网站传播更多信息，并不意味着本站赞同其观点和真实性并承担责任；
2 .转载的文章只表达了原始作者的观点，与本站无关。 其原创性及正文中记述的文字和内容尚未在本网站上得到证实。 本网站对该文及其全部或部分的内容、文字的真实性、完整性、及时性不作任何保证或承诺。
3 .本网站转载稿件如有著作权等问题，请作者及时与本网站联系，及时处理。
登录后，可以拥有收藏文章和关注作者的权限.
注册
登录