Canvas translate 变形

周大胖子

首先先声明：
变形——其实本质是移动原点的坐标 ； 例如 ctx.tarnslate(100,100); 就表示原点 X移动100， Y 移动100;
应当结合 save()  与 restore();   保存上下文一切属性； 与 还原上下文一切属性结合使用； 【不可嵌套】

1. //保存上下文一切属性
2. ctx.save();
3. ctx.translate(100,100);
4. ctx.fillStyle="red";
5. ctx.fillRect(100,100,100,100);
7. // 复原
8. ctx.restore();
10. // 画圆
11. ctx.beginPath();
12. ctx.arc(300,100,100,0,Math.PI*2, true);
13. ctx.closePath();
14. ctx.fill();

复制代码

周大胖子

1.   ctx.save();
2.                 // 坐标圆心 偏移x 150 ,Y 120
3.                 ctx.translate(200, 200);
4.                 // 坐标轴 整体旋转 (Math.PI*2/360)*2 2°
5.                 ctx.rotate((Math.PI*2/360)*(2+pin));
6.                 // 注意了，这里的图片的坐标轴是负的
7.                 ctx.drawImage(img,-24,-24,48,48);

复制代码