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

Question

我试图在画布上绘制具有不同变换的多个东西。我正在为berzierCurveTo（）部分应用a.scale（），但缩放转换也会影响底部的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();

This is what the image looks like

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/