以下代码片段在 Canvas 上绘制垂直线(1px 宽)。然而,有些线条看起来比其他线条更宽,有些很模糊,有些则正常。在不同的帖子中,我读到需要减去 0.5 px 或平移坐标。它不适用于我的情况。
我尝试使用按 odf 0.5 因子进行平移、舍入坐标并手动添加 0.5(请参阅 drawLine 方法的变体)。没有任何效果
如何使垂直线变得清晰干净?
谢谢
function doStuff() {
var cnv = document.getElementById("cnvs");
var ctx = cnv.getContext("2d");
var lw = 1;
ctx.lineWidth = lw;
var xMax = cnv.width;
var ygMax = cnv.height;
var iTranslate = 0.5; // (lw % 2) / 2;
ctx.translate(iTranslate, iTranslate);
deltaX = 12;
for (var x = deltaX; x < xMax; x += deltaX) {
drawLine(ctx, x, ygMax, x, 0);
}
}
function drawLine(ctx, x0, y0, xf, yf) {
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(xf, yf);
ctx.stroke();
ctx.closePath();
}
function drawLine2(ctx, x0, y0, xf, yf) {
ctx.beginPath();
ctx.moveTo(Math.round(x0), y0);
ctx.lineTo(Math.round(xf), yf);
ctx.stroke();
ctx.closePath();
}
function drawLine3(ctx, x0, y0, xf, yf) {
ctx.beginPath();
ctx.moveTo(x0 + 0.5, y0);
ctx.lineTo(xf + 0.5, yf);
ctx.stroke();
ctx.closePath();
}
doStuff();
<canvas id="cnvs" width="200" height="100"></canvas>
最佳答案
代码中显示的行尽可能清晰。线条不能比一个像素细(这是我从 Firefox 和 Opera 中的代码中得到的结果):
从这一点开始,您只能通过减少黑度来产生它们变薄的错觉。例如,如果您使用中灰色 (#777) 颜色进行描边,它们将如下所示:
但它们的大小完全相同。
如果您使用 0.5 的线宽或使用双倍大小的 Canvas 并使用 CSS 将其缩小到一半(在这些情况下由于重新采样/插值),您会得到这种错觉。
附录:如果上图中的线条看起来仍然不均匀,则可能是您的显示器设置不是最佳的,即。使用的分辨率与屏幕的物理像素不匹配。检查系统设置是否使用推荐的分辨率,因为任何其他设置都会在系统/硬件级别强制进行插值/重新采样,并且无论您在 Canvas 中做什么都无济于事。
function doStuff() {
var cnv = document.getElementById("cnvs");
var ctx = cnv.getContext("2d");
var lw = 1;
ctx.lineWidth = lw;
var xMax = cnv.width;
var ygMax = cnv.height;
var iTranslate = 0.5; // (lw % 2) / 2;
ctx.translate(iTranslate, iTranslate);
deltaX = 12;
ctx.strokeStyle = "#777";
for (var x = deltaX; x < xMax; x += deltaX) {
drawLine(ctx, x, ygMax, x, 0);
}
}
function drawLine(ctx, x0, y0, xf, yf) {
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(xf, yf);
ctx.stroke();
}
doStuff();
<canvas id="cnvs" width="200" height="100"></canvas>
关于javascript - html5 Canvas 。模糊的线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37354486/