HTML5之canvas 7画布旋转

 

 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4         <title>画布旋转</title>
 5         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 6         
 7     </head>
 8     <body>
 9         <canvas id="canvas" width="500" height="500"></canvas>
10         <script type="text/javascript">
11             var oCanvas = document.getElementById("canvas");
12             var context = oCanvas.getContext("2d");
13             context.fillStyle = "#ededed";
14             context.fillRect(0, 0, 500, 500);
15             //save
16             context.save();
17             //1.变更坐标原点
18             context.translate(500,500);
19             context.rotate(Math.PI);//旋转
20             context.beginPath();
21             context.fillStyle = "rgba(255,0,0,0.5)";//颜色
22             context.fillRect(450,0,30,180);
23             context.fillRect(400,0,30,120);
24             context.fillRect(350,0,30,210);
25             context.closePath();
26             //restore
27             context.restore();
28             
29         </script>
30     </body>
31 </html>

 

posted @ 2016-09-06 13:06  李大白程序员  阅读(2705)  评论(0)    收藏  举报