Question

我目前正在尝试创建一个多级发光效果，在几条填充路径上有几个不同的阴影效果。

但是，在尝试恢复上下文时，它不遵守恢复功能，并将最后的阴影阴影阴影和阴影线应用于所有阴影。

这是当前的画布上下文：

            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();

这是问题的一个方面：http://jsfiddle.net/jbhX5/

什么应该是橙色＆＃39;发光＆＃39;在10模糊的中间六边形周围是一个黄色的发光＆＃39;在3模糊。

Answer 1

您只需拨打save()一次，但restore()五次。

存储状态的工作方式与堆栈相同，save()执行推送，restore()执行 pop 。这意味着您需要将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 （我的重点）：

restore（）方法必须弹出绘图状态中的顶部条目堆栈，并重置它描述的绘图状态。 如果没有保存状态，方法必须什么都不做。

换句话说：第二次调用restore()没有任何事情发生/没有任何恢复，因为堆栈中只存在一个状态。

<强> Modified fiddle

HTML5 Canvas drophadow不服从restore（）函数

1 个答案: