码迷,mamicode.com
首页 > Web开发 > 详细

HTML5之canvas 7画布旋转

时间:2016-09-06 13:50:50      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:

 

 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>

 

HTML5之canvas 7画布旋转

标签:

原文地址:http://www.cnblogs.com/Abner5/p/5845372.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!