爲什麼在HTML 5畫布中不是矩形黑色？

Question

下面是一個帶有畫布標籤的簡單HTML 5頁面。在畫布上，矩形以黑色繪製，並顯示黑色文本。但由於某種原因，矩形實際上是灰色的。爲了使它變黑，我必須在它上面畫2或3次。這似乎表明存在某種阿爾法問題，但我不知道爲什麼會這樣。

此外，線寬看起來比1px寬多了.... ....？

任何人都可以告訴我我做錯了什麼嗎？

function draw() 
{ 
    var canvas = document.getElementById('tutorial'); 
    if (canvas.getContext) 
    { 
     var ctx = canvas.getContext('2d'); 
     //ctx.globalAlpha = 1; 
     //ctx.globalCompositeOperation = "source-over"; 

     ctx.lineWidth = "1"; 
     ctx.strokeStyle = "#000000"; 
     ctx.strokeRect(100, 100, 50, 50); //appears grey 

     ctx.font = "22px Arial"; 
     ctx.fillStyle = "#000000"; 
     ctx.fillText("test", 120, 120); //appears black as expected 
    } 
} 

Answer 1

你行看起來脂肪和灰色作爲它時，它繪製的重疊像素 - 即您的線路橫跨兩個像素。如果您將代碼更改爲：

ctx.strokeRect(100.5, 100.5, 50, 50); 

您會看到一條黑色實線。

詳細信息請參閱此頁：http://diveintohtml5.info/canvas.html#paths