1、坐标系和旋转是全局的

  1. <style>
  2.     canvas{
  3.         width: 500px;
  4.         height: 300px;
  5.         border: 1px solid;
  6.     }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="can" width="500px" height="300px"></canvas>
  11. <script>
  12.   var canvas = document.getElementById("can");
  13.   var ctx = canvas.getContext("2d");
  15. //   坐标系和旋转是全局的，而不是对某一路径有作用
  16.   ctx.translate(100,100);
  17.   ctx.rotate(Math.PI / 4);
  18.   ctx.beginPath(); 
  19.   ctx.strokeRect(0,0,100,50);
  20.   ctx.beginPath();
  21.   ctx.fillRect(200,0,100,50);
  22. </script>
  23. </body>

2、restore和save：解决坐标轴问题

  1. <style>
  2.     canvas {
  3.         width: 500px;
  4.         height: 300px;
  5.         border: 1px solid;
  6.     }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="can" width="500px" height="300px"></canvas>
  11. <script>
  12.     var canvas = document.getElementById("can");
  13.     var ctx = canvas.getContext("2d");
  14.     ctx.save();//存储当前坐标平移和旋转状态；可保存坐标系的平移数据，缩放数据，旋转数据。
  16.     ctx.beginPath();
  17.     ctx.translate(100, 100);
  18.     ctx.rotate(Math.PI / 4);
  19.     ctx.strokeRect(0, 0, 100, 50);
  20.     ctx.beginPath();
  21.     ctx.restore();// 恢复存储状态
  22.     ctx.translate(100, 100);
  23.     ctx.fillRect(200, 0, 100, 50);
  24. </script>
  25. </body>