javascript - 在 HTML 画布上为填充和描边获取单个阴影

Question

我必须在画布上绘制一个描边填充。为此，我ctx.fill分别打电话ctx.stroke。因此，笔触的阴影绘制在我想要避免的填充顶部。

有人可以告诉是否有办法避免这种情况？

这是我的代码：

ctx1.fillStyle = "blue";
ctx1.strokeStyle = "black";
ctx1.shadowColor = "rgba(0,255,0, 1)";
ctx1.shadowOffsetX = 50; 
ctx1.shadowOffsetY = 50;
ctx1.lineWidth = "20";
ctx.beginPath();  
ctx.moveTo(300, 100);  
ctx.lineTo(400, 100);  
ctx.lineTo(400, 200);
ctx.lineTo(300, 200);
ctx.closePath();

ctx1.fill();
ctx1.stroke();

http://jsfiddle.net/abWYZ/3/

Answer 1

每次对上下文执行绘制操作时，也会绘制阴影。画布的工作方式是将绘制的所有东西都放在以前的东西之上。所以发生的事情是执行填充，制作阴影，然后绘制笔触，这会在所有先前绘制的对象之上产生阴影。

这是一种可能的解决方案。

现场演示

 // Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

ctx.save();
ctx.fillStyle = "blue";
ctx.strokeStyle  = "black";

ctx.lineWidth="20";
ctx.beginPath();  
ctx.moveTo(300, 100);  
ctx.lineTo(400, 100);  
ctx.lineTo(400, 200);
ctx.lineTo(300, 200);
ctx.closePath();

ctx.shadowColor = "rgba(0,255,0, 1)";
ctx.shadowOffsetX = 50; 
ctx.shadowOffsetY = 50;

ctx.stroke();
ctx.fill();
// clear the shadow
ctx.shadowColor = 0;
ctx.shadowOffsetX = 0; 
ctx.shadowOffsetY = 0;

// restroke w/o the shadow
ctx.stroke();

如果您使用这样的方法，我建议您创建一个调用函数toggleShadow或类似的方法，以便您控制何时绘制阴影。