javascript - Canvas 阴影属性影响所有后续路径

Question

Canvas 阴影属性似乎会影响其后的所有路径，即使在关闭包含这些属性的路径时也是如此。我试着改变事情的顺序。好的，在可行的路径之前放置一条不需要阴影的路径，但这不是非常可靠的解决方法。有没有什么办法解决这一问题？

这是一个演示问题的简单 Jsfiddle:http://jsfiddle.net/zrt61283/1/

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");

// Left
ctx.beginPath();
ctx.arc(100, 75, 20, 0, 2 * Math.PI);
ctx.shadowColor = 'blue';
ctx.shadowBlur = 30;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.stroke();
ctx.fill();
ctx.closePath();

// Right
ctx.beginPath();
ctx.arc(200, 75, 20, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.closePath();

Answer 1

您可以使用 ctx.shadowBlur = 0; 或 ctx.shadowBlur = null;

重置 shadowBlur 属性

有关更多信息，请查看规范 shadowBlur (canvas2dAPI).

这是使用 save() 和 restore() 的另一种方法；

fiddle