javascript - 在 HTML Canvas 上获取填充和描边的单个阴影

Question

我必须在 Canvas 上绘制描边填充。为此，我分别调用了 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

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

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

Live Demo

 // 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 的函数或类似的函数，以便您控制何时绘制阴影。