HTML5之canvas 7画布旋转

前端开发   发布日期:2025年07月17日   浏览次数:167

 

  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. </head>
  7. <body>
  8. <canvas id="canvas" width="500" height="500"></canvas>
  9. <script type="text/javascript">
  10. var oCanvas = document.getElementById("canvas");
  11. var context = oCanvas.getContext("2d");
  12. context.fillStyle = "#ededed";
  13. context.fillRect(, , , );
  14. //save
  15. context.save();
  16. //1.变更坐标原点
  17. context.translate(,);
  18. context.rotate(Math.PI);//旋转
  19. context.beginPath();
  20. context.fillStyle = "rgba(255,0,0,0.5)";//颜色
  21. context.fillRect(,,,);
  22. context.fillRect(,,,);
  23. context.fillRect(,,,);
  24. context.closePath();
  25. //restore
  26. context.restore();
  27. </script>
  28. </body>
  29. </html>

 

以上就是HTML5之canvas 7画布旋转的详细内容,更多关于HTML5之canvas 7画布旋转的资料请关注九品源码其它相关文章!