0

異なる変換でキャンバスに複数のものを描画しようとしています。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();

画像はこんな感じ

4

1 に答える 1

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/

于 2013-02-11T05:25:54.247 に答える