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");
  14.   ctx.beginPath();
  15.   ctx.rotate(Math.PI / 6);
  16. //   会根据画布来旋转，如果原点是（100，100），那么原点也会跟着旋转。
  17.   ctx.moveTo(0,0);
  18.   ctx.lineTo(100,100);
  19.   ctx.stroke();
  20. //原点不跟着旋转
  21.   ctx.beginPath();
  22.   ctx.translate(100,100);//   改变了坐标系的位置
  23.   ctx.rotate(Math.PI / 6);
  24.   ctx.moveTo(0,0);
  25.   ctx.lineTo(100,0);
  26.   ctx.stroke();
  27.   //缩放：
  28.   ctx.beginPath();
  29.   ctx.scale(2,2);
  30.   ctx.strokeRect(100,100,100,100);
  31. </script>
  32. </body>