HTML5 Canvas万花筒旋转特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 Canvas万花筒旋转特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas万花筒旋转特效</title>
<style>
body{
	background: #000;
}
canvas{
	background: #ddd;
}
</style>
</head>
<body>
<center>
<canvas id="canvas" width="600" height="600"></canvas>
</center>
<script>
	window.onload=function(){
		var then=new Date().getTime();
		var canvas=document.getElementById("canvas");
		var ctx=canvas.getContext("2d");
		var arr=[];
		ctx.globalAlpha=0.5;
		ctx.fillStyle="#8e6ca7";
		setInterval(function(){
			var nowTime=new Date().getTime();
			var lag=(nowTime-then)/1000;
			then=nowTime;
			ctx.clearRect(0,0,canvas.width,canvas.height);
			for(var i=0;i<arr.length;i++){
				arr[i].num+=5;
				arr[i].scaleNum-=0.005;
				arr[i].distanceNum-=(0.1*25)*lag;
				ctx.beginPath();
				ctx.save();
				ctx.translate(canvas.width/2,canvas.height/2);
				ctx.rotate(arr[i].num*Math.PI/180);
				ctx.scale(arr[i].scaleNum,arr[i].scaleNum);
				ctx.fillRect(arr[i].distanceNum,0,80,60);
				ctx.restore();
				if(arr[i].scaleNum<0){
					arr.splice(i,1);
				}
			}
		},40);
		setInterval(function(){
			var arrInit={
				num:0,
				scaleNum:1,
				distanceNum:200
			};
			arr.push(arrInit);
		},80);
	}
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)