HTML Canvas让一切都变得更加大胆

Question

出于一些奇怪而突然的原因，我的画布似乎在右边的1/4上使线条更粗更暗。我尝试过多个浏览器和不同的计算机，除了适用于Android的Chrome，它们都具有相同的渲染问题。以下是我绘制的测试行的屏幕截图：

以下是有人想知道的代码：

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你没有正确清理画布：你交换了宽度和高度。 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>

Answer 2

只需从draw移除requestAnimationFrame。

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.lineTo(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();

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