html5图像不停旋转,html5 canvas多个图像旋转

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

多个图像围绕中心点旋转title>

script>

head>

window.addEventListener('load',eventWindowLoaded,false);functioneventWindowLoaded(){

canvasApp();

}functioncanvasSupport(){returnModernizr.canvas;

}functioncanvasApp(){if(!canvasSupport()){return;

}else{vartheCanvas=document.getElementById('canvas')varcontext=theCanvas.getContext("2d")

}

drawScreen();functiondrawScreen(){

context.setTransform(1,0,0,1,0,0);varangleInRadians= 45 *Math.PI/ 180;varx= 50;vary= 100;varwidth= 40;varheight= 40;

context.translate(x+.5*width,y+.5*height);

context.rotate(angleInRadians);

context.fillStyle="red";

context.fillRect(-.5*width,-.5*height,width,height);

context.setTransform(1,0,0,1,0,0);varangleInRadians= 75 *Math.PI/ 180;varx= 100;vary= 100;varwidth= 40;varheight= 40;

context.translate(x+.5*width,y+.5*height);

context.rotate(angleInRadians);

context.fillStyle="red";

context.fillRect(-.5*width,-.5*height,width,height);

context.setTransform(1,0,0,1,0,0);varangleInRadians= 90 *Math.PI/ 180;varx= 150;vary= 100;varwidth= 40;varheight= 40;

context.translate(x+.5*width,y+.5*height);

context.rotate(angleInRadians);

context.fillStyle="red";

context.fillRect(-.5*width,-.5*height,width,height);

context.setTransform(1,0,0,1,0,0);varangleInRadians= 120 *Math.PI/ 180;varx= 200;vary= 100;varwidth= 40;varheight= 40;

context.translate(x+.5*width,y+.5*height);

context.rotate(angleInRadians);

context.fillStyle="red";

context.fillRect(-.5*width,-.5*height,width,height);

}

}script>

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！canvas>

body>

html>