想設置一個「髒區」在我的畫布,以防止不爲所動項目(背景圖像,靜態項目等) 即只需要重繪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.
而不是處理裁剪,可能更容易使用多個畫布(CSS z-index幫助!)。這可以讓你完全避免剪輯。順便說一句,如果你可以設置一個具體的演示給jsfiddle或類似的服務,它可能會很酷。 –
感謝您的建議...確實,這裏有一個jsfiddle! http://jsfiddle.net/7kbzj/3/ 順便說一句,jsfiddle無法註冊區間,所以我添加了一個調用moveSprite()的btn,這是相同的... 對於他多畫布,是的,那可以。但是,那麼你會重畫那些沒有移動的東西。因爲它意味着要在移動設備上運行,所以需要剪裁,因爲它應該是巨大的性能節省。 – Jem
我在其他地方移動了保存/恢復。現在看看它,http://jsfiddle.net/7kbzj/4/。你可能還需要調整一些東西。我猜在init中的「保存」不會被正確觸發(畫布還沒有準備好嗎?)。確保在文檔正確加載之後執行它(另一種可能的修復方法)。 –