HTML 5畫布：從線條邊緣刪除顏色漸變

我試圖在白色的畫布上繪製黑色線條。由於某些原因，只有該行的內部像素（lineWidth = 3）真的是黑色的。我走到這條線的邊緣越多，就越是灰度級。如果我用lineWith = 1繪製它，則沒有像素是真正的黑色。HTML 5畫布：從線條邊緣刪除顏色漸變

我寫的會發生什麼有點示範：http://jsfiddle.net/xr5az/

只是爲了完整性，這裏是再次驗證碼：

<html> 

<head> 
<script type="text/javascript"> 
function page_loaded() 
{ 
    var cv = document.getElementById("cv"); 
    var ctx = cv.getContext("2d"); 
    ctx.fillStyle = "#ffffff"; 
    ctx.strokeStyle = "#000000"; 
    ctx.lineWidth = 3; 
    ctx.lineCap = "round"; 
    ctx.lineJoin = "bevel"; 
    ctx.fillRect(0, 0, cv.width, cv.height); 
    ctx.moveTo(5, 5); 
    ctx.lineTo(10, 10); 
    ctx.stroke(); 
    var imgdata = ctx.getImageData(0, 0, cv.width, cv.height); 
    for (var y = 0; y < cv.height; y ++) 
    { 
    for (var x = 0; x < cv.width; x ++) 
    { 
     var idx = 4 * (y * cv.width + x); 
     var c = imgdata.data[idx]<<16 | imgdata.data[idx+1]<<8 | imgdata.data[idx+2]; 
     if (c != 0xffffff) 
     { 
     document.getElementById("debug").innerHTML += x+"x, "+y+"y: "+c.toString(16)+"<br/>"; 
     } 
    } 
    } 
} 
</script> 
</head> 

<body onload="page_loaded()"> 
<p> 
<canvas id="cv" width="15" height="15"></canvas> 
</p> 
<p> 
Found colors: 
<div id="debug"></div> 
</body> 

</html>

爲什麼不是線只是黑色的，我怎麼可能會解決這個問題？

非常感謝！

來源

2013-10-20 Robert

所以人們可能會爭辯說，這是與該行的反alisaing。如果我將'lineWidth'改爲1，那麼唯一發現的顏色是黑色，所以這可能會有所幫助：http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html -canvas-element –

@AhmedNuaman - 這是一個相當古老的文檔。我發現了一個更近的答案，在這裏：http://stackoverflow.com/questions/4261090/html5-canvas-and-anti-aliasing。如果您在JS調試器的「Watches」列表中查看畫布上下文（如getContext（'2d'）所示），您將看到imageSmoothingEnabled和webkitImageSmoothingEnabled標誌。對前者設置錯誤也適用於後者。 _但是，對提供的小提琴沒有影響。 – enhzflep

@AhmedNuaman：如果我將lineWith設置爲1，我會得到像4x，4y這樣的顏色：fbfbfb; 5x，4y：d0d0d0; 4x，5y：c4c4c4; 5x，5y：151515;例如Firefox 6x，5y：a7a7a7。 – Robert

垂直或水平繪製並添加0.5（jsfiddle.net/xr5az/2/） - 您將只會得到黑色和白色的顏色。（請注意，我隱藏了行的開頭和結尾，它會是灰色的......）

ctx.moveTo（-2,5.5）; ctx.lineTo（17，5.5）; ctx.stroke（）;
當您添加角度時，系統會添加額外的灰色像素，如果沒有它，線條看起來很糟糕。
如果您只想從黑色獲得線條，請在線條起點和終點之間繪製許多單獨的像素（或者如果您想要lineWidth> 1，請使用正方形）。

p.s.對於破碎的小提琴鏈接對不起，系統踢我的消息，即使代碼包括10倍...

來源

2013-10-20 14:21:29 ViliusL

好的，所以這真的是因爲線的漸變...嗯，沿線添加黑色方塊效率相當低，所以我決定完全在像素水平。但看到不同瀏覽器的行爲完全不同，這是相當令人沮喪的。可惜的是，不可能強制在原始像素級別上創建銳利的線條。謝謝你的解釋！ – Robert

HTML 5畫布：從線條邊緣刪除顏色漸變

回答

相關問題