Question

在使用 ~~ctx.moveTo~~ ctx.lineTo（）在画布元素中绘制对角线时，我发现它们具有“断断续续”的外观，几乎就像是点缀的，具有较暗和较亮的段。我尝试设置/取消设置ctx.imageSmoothingEnabled（无效）。看来别名是由操作系统控制的，因此我对此无能为力。经过大量搜索，我还没有找到解决方案。有人有建议或解释吗？

ctx.globalAlpha = 1;
ctx.strokeStyle = "rgb(255, 255, 255)";
ctx.lineWidth = 1;
ctx.imageSmoothingEnabled = true;

ctx.beginPath();
ctx.moveTo(0, 20);
ctx.lineTo(200, 40);

ctx.moveTo(0, 40);
ctx.lineTo(200, 80);

ctx.stroke();

这是一个有效的示例：jsfiddle

Answer 1

简短地搜索高密度显示器+画布以获取有关该主题的更多信息，

将行与以下内容进行比较：https://jsfiddle.net/hycbona0/

请注意我如何设置画布的宽度/高度，并将画布的CSS宽度/高度设置为 half 画布的宽度/高度。

canvas.width = 600;
canvas.height = 300;

并且：

canvas {
  background-color: black;
  width: 300px;
  height: 150px;
}

这意味着每个CSS像素有两倍的画布像素，这将使其在高密度显示器上看起来更好。

HTML画布-对角线看起来“不稳定”

1 个答案: