HTML Canvas剪輯區域 - 上下文恢復？

想設置一個「髒區」在我的畫布，以防止不爲所動項目（背景圖像，靜態項目等）即只需要重繪HTML Canvas剪輯區域 - 上下文恢復？

編輯畫了一個移動播放器後面的背景重繪：作爲建議，這裏是它 http://jsfiddle.net/7kbzj/3/

中的jsfiddle「更新」方法不起作用在那裏，所以它的moveSprite（），您可以通過點擊「移動精靈」鏈接...基本上，獲得運行裁剪區域應該在每次點擊時向右移動10px。剪貼蒙版停留在初始位置，只發生重新塗刷。奇怪O_O

因此，正如我初始化我的畫布，一旦背景畫，集我使用ctx.save（）方法：

function init() { 
    canvas = document.getElementById('kCanvas'); 
    ctx = canvas.getContext('2d'); 

    ctx.fillStyle = "rgb(0,128,0)"; 
    ctx.fillRect (0,0,320,240); 

    ctx.save(); 

    setInterval(function() { update(); }, tpf); 
}

爲了看到剪輯作品，我得出一個不同的顏色背景（藍色）中，我想剪輯......結果是壞的，只有第一截取區域被塗成藍色:(

function update() { 
    setDirtyArea(x,y,w+1,h) 

    ctx.fillStyle = "rgb(0,0,128)"; 
    ctx.fillRect (0,0,320,240); 

    x++; 

    // paint image 
    ctx.clearRect(x,y,w,h); 
    ctx.drawImage(imageObj, x, y);

}

function setDirtyArea(x,y,w,h) { 
    ctx.restore(); 
    // define new dirty zone 
    ctx.beginPath(); 
    ctx.rect(x, y, w, h); 
    ctx.clip(); 
}

面積0

我很想藍色區域向屏幕右方傳播...請幫助，我不明白什麼是錯的！謝謝， J.

來源

2011-10-19 Jem

而不是處理裁剪，可能更容易使用多個畫布（CSS z-index幫助！）。這可以讓你完全避免剪輯。順便說一句，如果你可以設置一個具體的演示給jsfiddle或類似的服務，它可能會很酷。 –

感謝您的建議...確實，這裏有一個jsfiddle！ http://jsfiddle.net/7kbzj/3/ 順便說一句，jsfiddle無法註冊區間，所以我添加了一個調用moveSprite（）的btn，這是相同的... 對於他多畫布，是的，那可以。但是，那麼你會重畫那些沒有移動的東西。因爲它意味着要在移動設備上運行，所以需要剪裁，因爲它應該是巨大的性能節省。 – Jem

我在其他地方移動了保存/恢復。現在看看它，http://jsfiddle.net/7kbzj/4/。你可能還需要調整一些東西。我猜在init中的「保存」不會被正確觸發（畫布還沒有準備好嗎？）。確保在文檔正確加載之後執行它（另一種可能的修復方法）。 –

你需要用與保存和恢復方法箱子的實際繪圖和裁剪。幷包含closePath方法。我已經修改你的小提琴，以我相信你正在努力的方式工作。

http://jsfiddle.net/jaredwilli/7kbzj/7/

ctx.save(); // save the context 
    // define new dirty zone 
    ctx.beginPath(); 
     ctx.rect(x, y, w, h); 
     ctx.clip(); 

ctx.restore(); // restore the context

我還了解到，使用保存和恢復可以得到非常複雜的，而且很難知道它來自哪方面你的，最多一個漂亮的巨大的畫布應用即時通訊工作，和我發現縮進你的畫布代碼非常有幫助。特別是保存/恢復。我甚至認爲它應該被認爲是一種最佳實踐，所以知道和做得更好的人越多。

希望這會有所幫助。

來源

2011-11-16 03:43:52 jaredwilli

HTML Canvas剪輯區域 - 上下文恢復？

回答

相關問題