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>
