Question

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

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中从命令行运行相同的代码，我什么也得不到。

当存在动画阴影时，问题是可重现的。如果我删除阴影代码并保留动画，那么它的效果很好。即使我删除动画和保持阴影，它也有效。只有当Shadow和Animation都存在并且仅在Mac OS中发现错误时才会出现问题。

我用Google搜索CGContextClearRect: called with non-empty path n我发现它与Mac开发有关。我没有经验。谁能告诉为什么会出现这种行为？

Answer 1

我相信如果你将clearRect()电话放在路径上，就像这样......

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

问题可能会消失。

在Mac中的Canvas 2d中'CGContext ClearRect：使用非空路径调用'

1 个答案: