翻譯html5畫布

我想知道如何翻譯已經在html5畫布上繪製的整個場景，例如向下5像素。我知道翻譯方法只是翻譯了畫布的座標系，但我想知道是否有辦法將已經繪製到畫布上的整個場景進行翻譯。翻譯html5畫布

2010-08-02 George

您可以將轉換和調用的drawImage傳遞畫布本身。

ctx.save(); 
ctx.translate(0, 5); 
ctx.drawImage(canvas, 0, 0); 
ctx.restore();

當這樣做時，原來的內容仍然會在下面。根據您要完成的效果，設置globalCompositeOperation可能會對此有所幫助。

但是，您可能需要使用drawImage首先複製到第二個畫布，清除當前，應用變換並從副本中繪製。

來源

2010-08-02 21:08:13

這聽起來像我想要的。我會試試看，並告訴你它是否適合我。 – George 2010-08-02 21:18:54

這個解決方案對我很好。但是，如果涉及到縮放，它也不能很好地工作。我有一個畫布，其縮放比例使得繪圖區域的寬度和高度分別爲120000和60000.畫布元素本身具有寬度1200和高度600，因此縮放變換在繪製之前在座標系上執行。無論如何，問題在於如果將圖像複製到第二個畫布，清除當前圖像並應用轉換和複製（如您所說），則平移和縮放將會使圖像模糊。只是想知道如果你知道如何使它不模糊。 – George 2010-08-03 19:03:55

是的，這正是發生了什麼事情。問題是，如果我從具有高分辨率的主畫布繪製到備份畫布，它將始終使用基本1200x600分辨率繪製，而不是放大的1200000x600000分辨率。此外，來回解決方案對我來說是可以的，因爲只有當用戶想要時才需要這樣做，而且不會那麼做。 – George 2010-08-03 21:37:58

-1

除非你截圖和翻譯。

然而，你的繪製代碼應該做的伎倆前右剛插入

context.translate(0, 5)// or your values

。

參考：MDN Canvas Tutorial (Transformations)

來源

2010-08-02 21:01:33 pop850

我已經說過了，（至少我以爲我）明確表示這不是我想要的。該翻譯將翻譯我以後繪製的任何內容，而不是任何已繪製的內容。但是，您的屏幕截圖解決方案可能是我想要的。你有指示如何做到這一點？ – George 2010-08-02 21:06:40

Canvas對象有一個名爲toDataUrl的方法。看到這個問題http://stackoverflow.com/questions/934012/get-image-data-in-javascript – 2010-10-20 18:05:13

回答

相關問題