html万花筒照片代码,canvas绘制万花筒效果（代码分享）

万花筒

canvas{

background:#eee;

}

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

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

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

}