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>