canvas绘制万花筒效果（代码分享）

话不多说，请看代码：

<！doctype html><html><head><meta charset="utf-8"><title>万花筒</title><style>canvas{ background:#eee; }</style><script>window.onload = function（）{ var canvas = document.getElementById（"canvas"）; var cobj = canvas.getContext（"2d"）; var arr = []; var t=setInterval（function（）{cobj.clearRect（0,0,600,600）; for（var i=0;i<arr.length;i++）{cobj.save（）;cobj.translate（300,300）;cobj.scale（arr[i].scales,arr[i].scales）;cobj.rotate（arr[i].angle*Math.PI/180）;cobj.fillStyle = arr[i].color;cobj.fillRect（arr[i].num,arr[i].num,30,30）;cobj.restore（）; } },50）; setInterval（function（）{for（var i=0;i<arr.length;i++）{if（arr[i].num<=0）{ arr.splice（i,1）; continue;}arr[i].angle+=2;arr[i].num-=0.2;arr[i].scales-=0.002;if（arr[i].scales<=0.2）{ arr[i].scales=0.2; }}},50）; setInterval（function（）{var rect = {angle:0,num:150,scales:1,color:"rgb（"+parseInt（Math.random（）*255）+","+parseInt（Math.random（）*255）+","+parseInt（Math.random（）*255）+"）"};arr.push（rect）;},600）; }</script></head><body><canvas width="600" height="600" id="canvas"></canvas></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！