「前端特效」----js生成的多彩旋转魔力画笔

效果图：在线效果图click here

代码：

<!-- html代码 -->
<canvas></canvas>

/* css代码 */
canvas{
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	z-index:-9999;
}

<script>
	var ctx = doucment.querySelector('canvas').getContext('2d');
	
	function resize(canvas){
		var width = canvas.clientWidth;
		var height = canvas.clientHeight;
		if(width != canvas.clientWidth || height != canvas.clientHeight){
			canvas.clientWidth = width;
			canvas.clientHeight = height;
		}
	};
	function render(time){
		time *= 0.001;
		resize(ctx.canvas);
		var w = ctx.canvas.width;
		var h - ctx.canvas.height;
		var hw = w / 2;
		var hh = h / 2;
		
		ctx.clearRect(0,0,w,h);//清除画布中的元素;
		var grd = ctx.createLinearGradient(-400,0,400,0);//创建线性渐变
		grd.addColorStop(0,'#FF4843');//规定渐变对象中的颜色和停止位置；
		gre.addColorStop(0.2,"#FFBF43");//颜色可根据自己的喜好或需求改变
		gre.addColorStop(0.4,"#FBFF93");
		gre.addColorStop(0.6,"#79C975");
		gre.addColorStop(0.8,"#6A3072");
		gre.addColorStop(1,"#328BDC");
		
		ctx.fillStyle = grd;
		ctx.translate(hw,hh);//将图画映射到画布中央；
		for(var ii = 0;ii < 200; ii++){
			ctx.rotate(Math.sin(time*0.3)*0.5);//旋转当前绘图
			ctx.fillRect(-hw,-hh,w,h);//绘制图画；
			ctx.scale(0.9,0.9)//缩放当前绘图	
		}
		ctx.restore();//返回之前保存过的属性。
		requestAnimationFrame(render);
	};
	requestAnimationFrame(render);//相当于setInterval
</script>