我试图在我的画布上设置一个“脏区”以防止重新绘制未移动的项目(背景图像、静态项目等),即只需要重新绘制移动玩家背后的背景
编辑:正如建议的那样,这是它的 jsfiddle http://jsfiddle.net/7kbzj/3/
“更新”方法在那里不起作用,所以它是 moveSprite(),您可以通过单击“移动精灵”链接来运行...基本上,每次单击时剪切区域应该向右移动 10 像素。剪贴蒙版停留在初始位置,仅发生重新绘制。奇怪的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。