web-dev-qa-db-ja.com

キャンバスのコンテキストのスケールをリセットするにはどうすればよいですか？

キャンバスの2Dコンテキストである変数contextがあります。

_var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
_

context.scale(x,y)を複数回呼び出すと、前のスケーリングの実行内容に応じてコンテキストがスケーリングされます。たとえば、context.scale(2,2); context.scale(2,2)はcontext.scale(4,4)と同等です。コンテキストのスケールをリセットするにはどうすればよいですか？

javascripthtmlcanvashtml5-canvas
15
Jonah

scaleは、現在の変換行列にスケールマトリックスを乗算するため、実際、これらのスケール係数は乗算されます。状態スタックを使用して、現在の変換を保存および復元できます。

context.save();
context.scale(2, 2);
... // anything drawn here is twice as big
context.restore();

または、単位行列を直接ロードして変換をリセットすることもできます。

context.scale(2, 2);
...
context.setTransform(1, 0, 0, 1, 0, 0);
26
Thomas

次の方法はより明確ですが、実験的なものです。つまり、IEとEdge以外はすべてサポートしています。

context.resetTransform();

2019年の時点で、賢明なオプションはまだです：

ctx.setTransform(1, 0, 0, 1, 0, 0);

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform#Browser_compatibility

1
user1517142