HTML5之canvas 7画布旋转

寻技术 Html/CSS 2023年08月26日 62

 

 <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>

 

关闭

用微信“扫一扫”