HTML Canvas 使右侧的一切都变得更粗

Question

由于一些奇怪而突然的原因，我的 Canvas 似乎使右侧的线条变得更粗和更暗 ~1/4-ish。我尝试了多种浏览器和不同的计算机，除了 Chrome for Android 之外，它们都有相同的渲染问题。这是我绘制的测试线的屏幕截图:

如果有人想知道，这里是代码:

var canvas = document.getElementById("foreground");
var context = canvas.getContext("2d");
var height = 450;
var width = 600;

canvas.width = width;
canvas.height = height;

function draw() {
  context.clearRect(0, 0, canvas.height, canvas.width);

  for (var i = 1; i < (800 - (0 * 2)) / 35; i++) {
    context.beginPath();
    context.moveTo(200 + (i * 35) + 0 | 0, 50 + 0 | 0);
    context.lineWidth = 1;
    context.lineTo(200 + (i * 35) + 0 | 0, 50 + 800 - 0 | 0);
    context.strokeStyle = "black";
    context.stroke();
    context.closePath();
  }

  for (var i = 1; i < (800 - (0 * 2)) / 35; i++) {
    context.beginPath();
    context.moveTo(200 + 0 | 0, 50 + (i * 35) + 0 | 0);
    context.lineWidth = 0.5;
    context.lineTo(200 + 800 - 0 | 0, 50 + (i * 35) + 0 | 0);
    context.strokeStyle = "black";
    context.stroke();
    context.closePath();
  }

  requestAnimationFrame(draw);
}

draw();

<div id="container">
  <canvas id="foreground"></canvas>
</div>

Answer 1

您没有正确清除 Canvas :您交换了宽度和高度。 requestAnimationFrame 然后再次绘制所有内容，由于只有部分图像被清除，未清除的部分变得“更厚”。

修复:

  context.clearRect(0, 0, canvas.width, canvas.height);

var canvas = document.getElementById("foreground");
var context = canvas.getContext("2d");
var height = 450;
var width = 600;

canvas.width = width;
canvas.height = height;

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 1; i < (800 - (0 * 2)) / 35; i++) {
    context.beginPath();
    context.moveTo(200 + (i * 35) + 0 | 0, 50 + 0 | 0);
    context.lineWidth = 1;
    context.lineTo(200 + (i * 35) + 0 | 0, 50 + 800 - 0 | 0);
    context.strokeStyle = "black";
    context.stroke();
    context.closePath();
  }

  for (var i = 1; i < (800 - (0 * 2)) / 35; i++) {
    context.beginPath();
    context.moveTo(200 + 0 | 0, 50 + (i * 35) + 0 | 0);
    context.lineWidth = 0.5;
    context.lineTo(200 + 800 - 0 | 0, 50 + (i * 35) + 0 | 0);
    context.strokeStyle = "black";
    context.stroke();
    context.closePath();
  }

  requestAnimationFrame(draw);
}

draw();

<div id="container">
  <canvas id="foreground"></canvas>
</div>