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剪辑区域 - 上下文恢复？

回答

相关问题