HTML5 キャンバスをマウス カーソルに合​​わせてズームする

キャンバスは常に現在の原点から拡大縮小されます。デフォルトの原点は [0,0] です。別の点からズームしたい場合は、最初に ctx.translate(desiredX,desiredY); を実行します。これにより、キャンバスの原点が [desiredX,desiredY] にリセットされます。

translate() メソッドは、キャンバス上の (0,0) 位置を再マップします。 scale() メソッドは、現在のグラフィックを拡大または縮小します。オフセットによってキャンバス コンテキストを pan() したい場合は、最初にscale() してズームインまたはズームアウトし、次にマウス オフセットの反対の位置で pan() する必要があります。

次の例では、手順を示します

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

以上がHTML5 キャンバスをマウス カーソルに合​​わせてズームするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。