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

多個圖像圍繞中心點(diǎn)旋轉(zhuǎn)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>

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的html5图像不停旋转,html5 canvas多个图像旋转的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。