HTML Canvas剪辑区域 - 上下文恢复?

时间:2011-10-19 12:35:01

标签: image html5 canvas clipping clip

我试图在画布上设置“脏区”以防止重新绘制无动物的项目(背景图像,静态项目等) 即只需要重新绘制移动玩家背后的背景

编辑:正如所建议的,这是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();
}

我喜欢把蓝色区域传播到屏幕右侧...请帮助,我不明白什么是错的! 谢谢, 学家

1 个答案:

答案 0 :(得分:4)

您需要使用保存和恢复方法包装框的实际绘图和裁剪。并包含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

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

希望这会有所帮助。