HTML5之canvas 7画布旋转

Posted 李大白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于HTML5之canvas 7画布旋转的主要内容,如果未能解决你的问题,请参考以下文章

html5图像旋转缩放并上传

如何旋转 HTML5 画布的现有内容?

在 HTML5 画布上绘制旋转文本

HTML5之canvas-1画布矩形

html5 Canvas之画布合成的属性总结

在 html5 画布上旋转单个图像(但不是其他图像)?