今天小编给大家分享一下html5如何实现圆圈扩散效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
实现原理
通过不断的改变圆的半径大小，不断重叠达到运动的效果，在运动的过程中，设置当前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();
};
以上就是“html5如何实现圆圈扩散效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
