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);
}
}
你的浏览器无法使用canvas
小白童鞋;你的支持是我最大的快乐!!