CGContextClearRect:使用非空路径调用'在Canvas2d在Mac

'CGContextClearRect: called with non-empty path' in Canvas2d in Mac

本文关键字：调用 Canvas2d Mac 路径 CGContextClearRect      更新时间：2023-09-26

我已经写了一个简单的代码来绘制带有阴影的动画圆圈，这里是

function animate(){
  if(i<=360){
    var rad_grad = ctx.createRadialGradient(200,200,0, 200,200,100);
    rad_grad.addColorStop(0,'#fff');
    rad_grad.addColorStop(1, '#444');
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.beginPath();  
    ctx.strokeStyle = lin_grad;
    ctx.lineWidth = 30; //20
    ctx.arc(200,200,50,0,Math.PI*(i=i+2)/180);
    ctx.stroke();
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = 5;
    ctx.shadowColor = 'rgba(68,68,68,0.7)';
    ctx.closePath();
    window.webkitRequestAnimationFrame(animate);
  }
  else{
    window.webkitCancelRequestAnimationFrame();
  }
}

现在这段代码运行良好。没有问题。但是当我在Mac中从命令行启动Google Chrome时，我一直在命令行中获得CGContextClearRect: called with non-empty path错误，而动画是在上。然而，如果我在Ubuntu的命令行中运行相同的代码，我什么也得不到。

当有动画阴影时，问题也会重现。如果我移除阴影代码并保留动画，那么效果就会很好。即使我移除动画并保留阴影，它也能工作。只有当阴影和动画都存在时，问题才会出现，而且这个错误只在Mac OS中发现。

我搜索了CGContextClearRect: called with non-empty path，我发现它与Mac开发有关。我没有这方面的经验。有人能告诉我为什么会有这样的行为吗?

我相信如果你把clearRect()调用在一个路径，像这样…

ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.closePath();

问题可能会消失。

相关文章：