使用canvas＆＃34; strokeRect＆＃34;功能与＆＃34; shadowBlur＆＃34;属性将填补rect范围

Question

我使用以下代码绘制一个空心矩形。

ctx = canvas.getContext("2d");
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
// ctx.shadowBlur    = 1;
ctx.strokeStyle = '#f00'; 
ctx.lineWidth   = 1;
ctx.strokeRect(x, y, w,h);

很好。但是当我设置ctx的shadowBlur属性时，矩形被填充。它在Firefox中很好用。

Answer 1

当你再做一次击球时，你需要恢复上下文。

ctx = canvas.getContext("2d");

ctx.save();
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.shadowBlur    = 1;
ctx.strokeStyle = '#f00'; 
ctx.restore();

ctx.lineWidth   = 1;
ctx.strokeRect(x, y, w,h);

或者在完成想要模糊的笔划后，将shadowBlur设置为null。

Answer 2

我在Google代码中报告了一个错误。解决方案是将线宽从1更改为1.1。它有效。

获取更多信息：

chromium Issue 121251