I have made a test case to illustrate.
即使在这样的简单情况下,红色矩形也会闪烁,就好像需要花费太多时间来重绘一样,并且cpu分析显示clip()方法占用了大约10％的cpu.
在我的真实程序中,它达到16％并继续增加每一帧,直到画布几乎冻结浏览器..
我使用剪辑有什么问题吗？
谢谢你的任何建议,
问候.
解决方法
插入一个beginPath(),因为rect()添加到路径,而不像fillRect()/ strokeRect().这里发生的是矩形正在累积,最终会减慢削减时间.
这与使用setInterval(无法与监视器/屏幕刷新同步)相结合,会使问题恶化.
详细说明后者：
使用setInterval()/ setTimeout()会导致在绘制处于其操作的“中间”未完全完成并且发生屏幕刷新时发生的撕裂.
setInterval只能取整数值,你需要16.67 ms来逐帧同步(@ 60Hz).即使setInterval可以采用浮点数,它也不会将时序与监视器时序同步,因为计时器机制根本不受监视.
要解决此问题,请始终使用requestAnimationFrame将图形与屏幕更新同步.这与监视器刷新直接相关,并且是比另一个更低级别和更高效的实现,并且是为此目的而制作的,因此得名.
解决方案嵌入上面的两个修复程序
见modified bin here.
未来访客的代码：
function draw() {
context.fillStyle = '#000';
context.fillRect(0,width,height);
context.save();
context.beginPath(); /// add a beginPath here
context.rect(0,100,100);
context.clip();
context.fillStyle = '#ff0000';
context.fillRect(0,200,200);
context.restore();
requestAnimationFrame(draw); /// use rAF here
}
canvas.width = width;
canvas.height = height;
canvas.style.width = width+'px';
canvas.style.height = height+'px';
requestAnimationFrame(draw); /// start loop
PS：如果你需要停止循环注入条件以在循环内运行rAF,即：
if (isPlaying) requestAnimationFrame(draw);
有BTW不需要closePath(),因为这将在the specs之前为你隐式完成.如果你愿意,你可以添加它,但调用clip()(或fill()等)将为你做这些(规格是寻址浏览器实施者)：
Open subpaths must be implicitly closed when computing the clipping region