html5キャンバスのビュー "中心"を変更する

Question

イメージが1024x1250で、キャンバス要素が600x800の場合、キャンバスが本質的により大きいイメージの小さいビューポートになるようにイメージをキャンバスに描画できます画像。その中心点が動くようにしたいので、ビューポートが画像の別の部分を見ているという錯覚を作り出します。

今私はキャンバスに見るイメージの部分を再描画するような奇妙な方法でこれを行っていますが、私はこれが最適ではないと感じています。キャンバスに画像全体をレンダリングし、現在の中心点を何らかの形で「変換」する方法はありますか？このビューシフトは、うまくいくらかのネイティブレイヤーでうまくいくでしょうか？

Answer 1

画像を描画する前に、コンテキストを変換することができます（回転、スケーリング、平行移動など）。必要なのは、関数context.translate（x、y）です。

次に、あなただけの画像の右下部分を表示するには、例えば、（0,0）

であなたのイメージを描画する必要があります。

ctx.translate (-424, -450); 
ctx.drawImage (image, 0, 0); 

あなたはこのリンクhttps://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformationsを確認することができますコンテキスト変換に関する多くの例を参照してください。