更改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到看到很多關於上下文轉換的例子。