javascript - 如何使用一个转换会影响上下文中的多个事物

Question

我正在尝试在具有不同转换的画布上绘制多个东西。我仅将 a.scale() 应用于 berzierCurveTo() 部分，但比例转换也会影响底部的 arc() 。我已经尝试过 closePath() 和重置 scale(1,1) 但它不会做任何事情。我应该怎么办？

var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');

c.width = 500;
c.height= 550;
//Shape 1 with some transformations

a.scale(0.8,0.8); //How come a.scake affects the shape 2 as well?
a.beginPath();
a.moveTo(143, 59);
a.bezierCurveTo(151, 51, 195, 7, 272, 22);
a.stroke();
a.closePath();  //closePath doesn't do anything to stop scaling the shape 2

//Shape 2
a.beginPath();
a.arc(250, 400, 100, 0,6.3, false);
a.stroke();

这就是图像的样子

Answer 1

您可以在缩放之前保存画布状态并在形状 1 之后恢复它：

a.save();

a.scale(0.8, 0.8);
a.beginPath();
a.moveTo(143, 59);
a.bezierCurveTo(151, 51, 195, 7, 272, 22);
a.stroke();
a.closePath();

a.restore();

http://jsfiddle.net/uq5mR/