javascript - HTML5 Canvas dropshadow 不遵守 Restore() 函数

Question

我目前正在尝试在一些填充路径上使用一些不同的阴影来创建多级发光效果。

但是，当尝试恢复上下文时，它不遵循恢复函数，而是将最后一个 dropshadow 的 ShadowColor 和 ShadowBlur 应用于所有 dropshadow。

这是当前的 Canvas 上下文:

            var c=document.getElementById("paradigm");
            var ctx=c.getContext("2d");
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(31,21);
            ctx.lineTo(142,21);
            ctx.lineTo(151,38);
            ctx.lineTo(141,44);
            ctx.lineTo(32,44);
            ctx.lineTo(22,38);
            ctx.closePath();                
            ctx.fillStyle="#111111";
            ctx.strokeStyle = 'rgba(95,235,255,0.09)';
            ctx.fill();
            ctx.stroke();
            ctx.restore();

            ctx.beginPath();
            ctx.moveTo(153,42);
            ctx.lineTo(163,60);
            ctx.lineTo(109,155);
            ctx.lineTo(89,155);
            ctx.lineTo(89,143);
            ctx.lineTo(141,49);
            ctx.closePath();
            ctx.fillStyle="#111111";
            ctx.strokeStyle = 'rgba(95,235,255,0.09)';
            ctx.fill();
            ctx.stroke();
            ctx.restore();

            ctx.beginPath();
            ctx.moveTo(20,42);
            ctx.lineTo(32,49);
            ctx.lineTo(85,143);
            ctx.lineTo(85,155);
            ctx.lineTo(65,155);
            ctx.lineTo(10,60);
            ctx.closePath();
            ctx.fillStyle="#111111";
            ctx.strokeStyle = 'rgba(95,235,255,0.09)';
            ctx.fill();
            ctx.stroke();
            ctx.restore();

            ctx.shadowColor='rgba(228,105,22,0.5)';
            ctx.shadowBlur=10;
            ctx.beginPath();
            ctx.moveTo(81,68);
            ctx.lineTo(93,68);
            ctx.lineTo(99,78);
            ctx.lineTo(93,88);
            ctx.lineTo(81,88);
            ctx.lineTo(75,78);
            ctx.closePath();
            ctx.fillStyle="#cf672a";
            ctx.fill();
            ctx.restore();

            ctx.shadowColor='rgba(255,255,79,0.5)';
            ctx.shadowBlur=3;
            ctx.beginPath();
            ctx.moveTo(83,71);
            ctx.lineTo(92,71);
            ctx.lineTo(96,78);
            ctx.lineTo(91,85);
            ctx.lineTo(82,85);
            ctx.lineTo(78,78);
            ctx.closePath();
            ctx.fillStyle="#ffff4f";
            ctx.fill();
            ctx.restore();

            ctx.beginPath();
            ctx.moveTo(81,68);
            ctx.lineTo(93,68);
            ctx.lineTo(99,78);
            ctx.lineTo(93,88);
            ctx.lineTo(81,88);
            ctx.lineTo(75,78);
            ctx.closePath();
            ctx.strokeStyle = 'black';
            ctx.stroke();

这是该问题的 jsfiddle:http://jsfiddle.net/jbhX5/

在 10 模糊度下，中间六边形周围应该是橙色“发光”，但现在在 3 模糊度下是黄色“发光”。

Answer 1

您只调用 save() 一次，但 restore() 五次。

存储状态的工作方式与堆栈相同，其中 save() 执行 push 操作，restore() 执行操作>流行。这意味着您需要将 restore() 的调用次数与 save() 相匹配。

ctx.save();     // push
...
ctx.restore();  // pop

// here state will be as before save()

ctx.save();     // push
...
ctx.restore();  // pop

// here state will be as before save()

或

ctx.save();     // push
ctx.save();     // push
...
ctx.restore();  // pops second save
// here state will be as before second save()
...
ctx.restore();  // pops first save
// here state will be as before first save()

如果您调用恢复时没有保存与 specs says 相匹配的状态(我的重点):

The restore() method must pop the top entry in the drawing state stack, and reset the drawing state it describes. If there is no saved state, the method must do nothing.

换句话说:第二次调用 restore() 时什么也没有发生/什么也没有恢复，因为堆栈上只存在一种状态。

<强> Modified fiddle