我试图在填充白色的 Canvas 上画一条黑线。由于某些原因，只有该行的内部像素(lineWidth = 3)才是真正的黑色。我越靠近线条的边缘，越容易得到灰度级的细分。如果用lineWith = 1绘制，则没有像素真正是黑色的。
我对发生的情况做了一些演示: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>
为什么生产线不只是黑色的，我该如何解决这个问题？
非常感谢!
最佳答案
ctx.moveTo(-2，5.5);
ctx.lineTo(17，5.5);
ctx.stroke();
ps抱歉，小提琴链接断开了，即使包含10次代码，系统也会踢出我的信息...
关于javascript - HTML 5 Canvas:去除线条边缘的颜色渐变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19476777/