怎么用HTML5制作万花筒,如何用html5写出万花筒效果？

效果图：

代码如下：

http://www.baiduyo.com

canvas{

background:#ccc;

}

window.οnlοad=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

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();

}

},60)

setInterval(function () {

for (var i=0; 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;

}

}

},60)

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);

},1000)

}