HTML5，canvas和strokeRect：行較窄？

愚蠢的簡單的帆布用法：HTML5，canvas和strokeRect：行較窄？

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

ctx.strokeStyle = "#CCCC00"; 
ctx.lineWidth = 3; 
ctx.strokeRect(0, 0, width, height);

產生具有沿着頂部和左窄線矩形：

enter image description here

爲什麼會出現這種情況？我需要用填充補償嗎？它很煩人。

來源

2012-04-04 Wells

2的東西。

首先，奇數lineWidths（1,3,5，...）永遠不會用整數像素值繪製乾淨地應用。這是因爲X和Y是指像素之間的空間而不是其中心。因此，從[1,1]到[1,10]之間的1的筆畫會溢出一半到左側像素列中的像素，一半到右側。如果你從[1.5,1]到[1.5,10]畫出那條線，那麼它會填充一半到左側，一半填滿整個像素列。

任何奇數寬度都會顯示此行爲，但偶數不會因爲它們在每邊看起來乾淨而充滿像素。

其次，箱子被帆布頂部遮擋。當你將3px描邊居中放置在[0,0]上時，它會向上和向左溢出[-1.5，-1.5]，這超出了畫布可見範圍的範圍。所以它看起來應該是一半厚。

見差異，這裏的證明： http://jsfiddle.net/F4cqk/2/

enter image description here

第一個是喜歡你的代碼。第二個從左上角移開以顯示其寬度均勻性。第三部分展示瞭如何渲染一個沒有子像素模糊的3像素筆畫。

來源

2012-04-04 00:59:53

非常有趣的迴應 - 謝謝。 – Wells 2012-04-04 05:29:21

因爲你告訴它在0到繪製的3寬度的行...所以它的1/3將是把你的畫布...

http://jsfiddle.net/mhFLG/ VS http://jsfiddle.net/mhFLG/1/

來源

2012-04-04 00:49:04 Langdon

其實它不會是線的1/3，而是一半。 – 2012-04-04 01:27:38

@AlexWayne不是以像素爲單位的線寬？如何渲染只有1.5像素？編輯 - 哦，上帝，總之，是反對別名從3px行... wtf – Langdon 2012-04-04 02:30:08

HTML5，canvas和strokeRect：行較窄？

回答

相關問題