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画布：从线条边缘删除颜色渐变

回答

相关问题