存档:
</pre><p><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.οnlοad=function(){
var canvas=document.getElementById("canvas");
var cj=canvas.getContext("2d");
var angle=0;
var num=150;
var arr=[];
setInterval(function(){
cj.clearRect(0,0,600,600);
for(var i=0;i<arr.length;i++){
cj.save();
cj.translate(300,300);
cj.scale(arr[i].scales,arr[i].scales);
cj.rotate(arr[i].angle*Math.PI/180);
cj.fillStyle=arr[i].color;
cj.fillRect(arr[i].num,arr[i].num,30,30);
cj.restore();
}
},50)
setInterval(function(){
for(var i=0;i<arr.length;i++){
if(arr[i].num<=0){
arr.splice(i,1);
}
arr[i].angle+=2;
arr[i].num-=0.5;
arr[i].scales-=0.002;
if(arr[i].scales<=0.2){
arr[i].scales=0.2;
}
}
},50);
setInterval(function(){
var numA=parseInt(Math.random()*255);
var numB=parseInt(Math.random()*255);
var numC=parseInt(Math.random()*255);
var rect={angle:0,num:150,scales:1,color:"rgb("+numA+","+numB+","+numC+")"}
arr.push(rect);
},1000);
}
</script>
</head>
<body>
<canvas id="canvas" height="600" width="600"></canvas>
</body>
</html>