【canvas】圆环扩散效果

使用 HTML5 canvas 制作圆环扩散的效果以下是效果图

HTML5 canvas 圆环扩散效果

下面是实现代码
仅供参考转载请注明出处
如有问题请联系

页面元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形扩散</title>
</head>
	<body>
	    <canvas id="backs" width="1366" height="650"  ></canvas>
		<div class="div"></div>
	</body>
</html>

样式

 body {
     overflow: hidden;
     background: #000;
 }
 body,
 html {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
 }
 .div{
	 width:100%;
	 height:100%;
	 background-color:#555 ;
	 position: absolute; 
	 z-index: 0;
	 left:0;
	 top:0;
 }
 #backs{
	 position: absolute; 
	 z-index: 1;
	 left:0;
	 top:0
 }

核心代码

var oAnim = document.getElementById('backs');
var context = oAnim.getContext("2d");
var radius = 11,
	pos_x = 1366 / 2,
	pos_y = 650 / 2;

var addspan = 50;
var id = 0;
var arcArr = [];

function getNextID() {
	id++;
	if (id > 1000 * 1000) id = 0;
	return id;
}

function addArc() {
	arcArr.push({
		x: pos_x,
		y: pos_y,
		r: radius,
		id: getNextID(),
		rgbgrad: null
	});
}

function render(item) {
	/*
	* createRadialGradient 圆形渐变效果
	* 参数 (x , y , r , x2 , y2 , r2)
	* 因为用的圆形渐变 所以有 开始 和 结束 两个圆连接为渐变过程路径
	* x y 与 x2 y2 设置为同心 与 不同心 效果差距会很大  
	* addColorStop 渐变填充的节点
	* 可以插入多个 制作出吊炸天的效果（配合图形外发光的效果）性能是个问题 需要考虑 emmm...
	*/
	var grid = context.createRadialGradient(item.x, item.y, item.r - 10, item.x, item.y, item.r); //渐变填充器
	grid.addColorStop(0, 'rgba(255,255,0,0)'); //渐变节点
	grid.addColorStop(1, 'rgba(255,255,0,1)'); //渐变节点

	context.beginPath(); //新的圆必须要新的路径
	//画圆
	context.arc(item.x, item.y, item.r, 0, Math.PI * 2);
	context.fillStyle = grid; //填充样式 放入 渐变填充器
	context.fill(); //调用填充
	//context.stroke();
}

function drawCircle() {
	//清除画布
	context.clearRect(0, 0, 1366, 650);
	//也可以将 globalCompositeOperation 设置为 copy 以前绘制的会变成透明
	//context.globalCompositeOperation  的详细用法请参见下方给出的连接

	var i = 0,
		last = arcArr.length - 1,
		item;
	while (item = arcArr[i++]) {
		render(item);//绘制
		//标记删除  具体为何这样写 参见代码块下方给出的代码【相关代码#1】 
		if (item.r > pos_x + 100) {// 具体超出多少需要计算绘制圆心到
			i--;
			arcArr[i] = arcArr[last];
			delete arcArr[last];
			last--;
		} else {
			item.r += 2; //圆环扩散速率
		}
	}
	
	//修改数组 删除已超出绘制区域的圆环
	if (arcArr.length >= i) arcArr.splice(i - 1, arcArr.length - (last + 1));

	context.closePath();

}

//兼容写法
window.RAF = (function() {
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
		window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
			window.setTimeout(callback, 1000 / 60);
		};
})();

function RAFAction() {
	//在主canvas上画新圆
	if (arcArr.length > 0) drawCircle();
	if (addspan == 0) {
		addspan = 50; //间隔
		addArc();
	} else addspan -= 1;

	window.RAF(RAFAction);
}
//addArc();
RAFAction();

相关代码#1 相关连接：http://jsben.ch.

	/* 数据量 5000 个 1024.1024 左右的浮点数 数组  */
	/* 比 单项拷贝慢（内存耗费快） 但比 单项截取数组快（方法会返回新数组） */
	 	var i=0,maxlen =testArray.length,last =maxlen-1 ,delspan=5;
	 	while(i<maxlen){
	 			if(i%delspan===0){
					testArray[i]=testArray[last];
					delete testArray[last];
					maxlen--;
					last--;
	 			}else   i++;
 		}
 		testArray.splice(last, testArray.length-last);

关于 context.globalCompositeOperation 的介绍，这篇博客写的炒鸡明白。
我百度了好多都找不到一个好用的，下方是收藏级别的连接。
相关连接：https://blog.csdn.net/laijieyao/article/details/41862473.

如有误导请联系，我会进行修正。
邮箱 [email protected]

秒客网

HTML5 canvas 圆环扩散效果

【canvas】圆环扩散效果

相关文章