HTML Canvas 剪辑区域 - 上下文恢复？答案

【问题标题】：HTML Canvas clip area - Context restore?HTML Canvas 剪辑区域 - 上下文恢复？
【发布时间】：2011-12-10 21:44:26
【问题描述】：

我试图在我的画布上设置一个“脏区”，以防止重新绘制未移动的项目（背景图像、静态项目等）即只需要重新绘制移动玩家背后的背景

编辑：正如建议的那样，这是它的 jsfiddle http://jsfiddle.net/7kbzj/3/

“更新”方法在那里不起作用，所以它是 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();
}

我很想将蓝色区域传播到屏幕右侧...请帮助，我不明白出了什么问题！谢谢， J.

【问题讨论】：

与其处理剪辑，不如使用多个画布更容易（CSS z-index 有帮助！）。这使您可以完全避免剪辑。顺便说一句，如果您可以为 jsfiddle 或类似服务设置一个具体的演示，那可能会很酷。
感谢您的建议...确实，这是一个 jsfiddle ！ jsfiddle.net/7kbzj/3 BTW，jsfiddle 无法注册间隔，所以我添加了一个调用 moveSprite() 的 btn，它是相同的......对于他的多画布，是的，可以这样做。但是你会重新绘制没有移动的东西。由于它旨在在移动设备上运行，因此需要进行剪辑，因为它应该可以节省大量性能。
我将保存/恢复移到了别处。现在看看它，jsfiddle.net/7kbzj/4。你可能还需要调整一些东西。我猜初始化时的“保存”没有正确触发（画布还没有准备好？）。确保在文档正确加载后执行它（另一个可能的修复）。
哦，对了！似乎 .restore() 将最后一个状态从堆栈中弹出......这可以解释为什么每次都需要调用 .save() 。非常感谢伙计。

标签： image html canvas clipping clip

【解决方案1】：

您需要使用 save 和 restore 方法来包装盒子的实际绘制和剪裁。并包括 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

我还了解到，使用保存和恢复可能会变得非常复杂，并且很难知道你在哪个上下文中。它提出了一个非常大的画布应用程序，我正在使用它，我发现缩进你的画布代码有很大帮助。特别是保存/恢复。我什至认为它应该被认为是一种最佳实践，所以知道并做到这一点的人越多越好。

希望这会有所帮助。

【讨论】：

我其实是教canvas的，我肯定会教这种方式来缩进。这太棒了。