- <html>
- <head>
- <meta charset="UTF-8">
- <title>画布旋转</title>
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- </head>
- <body>
- <canvas id="canvas" width="500" height="500"></canvas>
- <script type="text/javascript">
- var oCanvas = document.getElementById("canvas");
- var context = oCanvas.getContext("2d");
- context.fillStyle = "#ededed";
- context.fillRect(, , , );
- //save
- context.save();
- //1.变更坐标原点
- context.translate(,);
- context.rotate(Math.PI);//旋转
- context.beginPath();
- context.fillStyle = "rgba(255,0,0,0.5)";//颜色
- context.fillRect(,,,);
- context.fillRect(,,,);
- context.fillRect(,,,);
- context.closePath();
- //restore
- context.restore();
- </script>
- </body>
- </html>
以上就是HTML5之canvas 7画布旋转的详细内容,更多关于HTML5之canvas 7画布旋转的资料请关注九品源码其它相关文章!