HTML5のtranslate-methodは、描画の原点を以前の原点に相対的に移動させるためです。（ctx.translate（20,20）を2回続けて使用すると、ctx.translate（40,40）を使用した場合と同じ結果が得られます）さて、問題は、描画の原点をにリセットしたいということです。元の位置（最初にtranslate（）を使用する前の位置）、どうすればよいですか？
質問する
28784 次
4 に答える
65
あなたはとを使用してそれを行うことができ.save()ます.restore()
ctx.save();
ctx.translate(// do some translations);
// draw whatever
ctx.restore();
save()現在のコンテキスト状態を「保存」するには、を呼び出す必要があります。次に、変換、回転などを実行できます。呼び出しが終了した後restore()、コンテキストの状態を最初に呼び出したときの状態にリセットしますsave()。
于 2012-06-21T18:17:43.480 に答える
53
ctx.setTransform(1, 0, 0, 1, 0, 0);
于 2013-07-09T23:13:38.190 に答える
7
ctx.resetTransform();
詳細については、 MDNのドキュメントを参照してください。ブラウザの互換性は非常に低いです。
于 2017-04-23T12:05:18.223 に答える
0
質問は、translate上記で提案されたすべてのソリューションのサブセットである操作のデフォルトをリセットする方法を尋ねます。
を適用するかsave/reset、を適用するかにかかわらず、変換だけでなく、スキューとスケーリング（および最初の場合はスタイル）の値もリセットします。setTransformresetTransform
翻訳を元に戻すには、Canvasが使用する変換行列の6つのプロパティのうち2つだけを復元する必要があり、残りは変更されません。
const currentTransform = ctx.getTransform();
// Properties deconstructed for illustrative purposes:
const hScale = currentTransform.m11;
const vSkew = currentTransform.m12;
const hSkew = currentTransform.m21;
const vScale = currentTransform.m22;
const hTranslation = currentTransform.dx;
const vTranslation = currentTransform.dy;
ctx.setTransform(hScale, vSkew, hSkew, vScale, 0, 0);
これにより、縮尺やスキューを変更せずに、平行移動が原点（0、0）にリセットされます。
transform(...)これは、現在保持している1つのキャンバスで乗算される変換行列を使用および定義し、変換を変更して、スケールとスキューをそのまま維持することでも実現できることに注意してください。ただし、このようなマトリックスを作成するには、現在原点からオフセットされている量を知る必要があります。この情報を知っていると、translateそもそも負の値を適用するだけで済みます。
于 2022-01-25T07:06:15.793 に答える