本文转发自热爱前端知识的博客 原博客地址
介绍
在ECharts中看到过这种圆形扩散效果,类似css3,刚好项目中想把它用上,but我又不想引入整个echart.js文件,更重要的是想弄明白它的原理,所以自己动手。在这篇文章中我们就来分析实现这种效果的两种方法,先上效果图:
实现原理
通过不断的改变圆的半径大小,不断重叠达到运动的效果,在运动的过程中,设置当前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; //线条宽度<