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

每次对上下文执行绘制操作时，也会绘制阴影。画布的工作方式是绘制的所有东西都放在之前的东西之上。所以发生了什么是填充被执行，形成它的阴影，然后绘制笔划，这使得阴影位于所有先前绘制的对象之上。

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

<强> 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的函数或沿着这些线的某些东西，以便控制何时绘制阴影。

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

1 个答案: