使用畫布的「strokeRect」功能與「shadowBlur」屬性將填充矩形範圍

我使用下面的代碼繪製一個空心矩形。使用畫布的「strokeRect」功能與「shadowBlur」屬性將填充矩形範圍

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中它沒問題。 enter image description here

來源

2012-03-31 coordinate

你有太多的選項卡中打開:) – Ryan 2012-03-31 03:23:14

你能放在jsbin.com減少？ – 2012-03-31 08:43:11

我想。但我不知道jsbin.com。我必須先學習它。 – coordinate 2012-04-01 01:51:16

我在谷歌代碼上報告了一個錯誤。解決方案是將線寬從1更改爲1.1。它的工作原理。

在獲得更多信息：

chromium Issue 121251

來源

2012-06-01 01:07:50 coordinate

您需要在做另一筆劃時恢復上下文。

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。

來源

2012-03-31 08:42:47

感謝您的回答。但我想模糊矩形的邊框。如果我將shadowBlur設置爲null或0，則矩形是空的，但邊框不會模糊。這發生在Chrome瀏覽器，並在Firefox中罰款。 – coordinate 2012-04-01 01:44:24

我在谷歌代碼上報告了一個錯誤。那麼解決方案是將線寬從1改爲1.1。它的工作原理。 – coordinate 2012-04-04 08:34:11

使用畫布的「strokeRect」功能與「shadowBlur」屬性將填充矩形範圍

回答

相關問題