动画方块旋转

来源：互联网发布：知联会是什么组织编辑：程序博客网时间：2024/05/20 17:27

存档：

</pre><p><pre name="code" class="html"><!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script>window.onload=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>

0 0

动画 方块旋转

动画方块旋转