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

Answer 2

正如其他人所说，重置会起作用 - 你也可以.save（）保存画布状态，你也需要恢复......

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

// Left
ctx.save();
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();
ctx.restore();

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

这将基本上保存画布的状态，并允许您在其中执行操作，然后将新的东西添加到画布并将它们保存为不同的部分。

这是一个使用它的快速小提琴 - https://jsfiddle.net/e0qm94dn/

画布阴影属性会影响所有后续路径

2 个答案:

fiddle