html5如何实现圆圈扩散效果

今天小编给大家分享一下html5如何实现圆圈扩散效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

创新互联建站长期为上千多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为天桥企业提供专业的网站制作、成都做网站天桥网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

实现原理

通过不断的改变圆的半径大小,不断重叠达到运动的效果,在运动的过程中,设置当前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如何实现圆圈扩散效果”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


本文题目:html5如何实现圆圈扩散效果
路径分享:http://myzitong.com/article/gscjgg.html