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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步