javascript - HTML Canvas 意外改变颜色

Question

我正在尝试使用 HTML Canvas 制作网格。我编写了以下代码。一开始一切正常，但一旦调整窗口大小，网格线的颜色就会因某种原因改变颜色。

如果您无法重现该行为，here is a video of the behavior 。

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext('2d');

window.addEventListener('resize', function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

var xOffset = 0;
var yOffset = 0;
var gridSize = 75;

ctx.lineWidth = 2;

function draw() {

  ctx.fillStyle = '#e8e8e8';
  ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);

  ctx.strokeStyle = '#7a7f7e';
  ctx.beginPath();
  ctx.moveTo(0, 0);
  for (var i = 0; i < window.innerWidth + gridSize; i += gridSize) {

    ctx.moveTo(i + xOffset % gridSize, 0);


    ctx.lineTo(i + xOffset % gridSize, window.innerHeight);
  }

  for (var i = 0; i < window.innerHeight + gridSize; i += gridSize) {


    ctx.moveTo(0, i + yOffset % gridSize);

    ctx.lineTo(window.innerWidth, i + yOffset % gridSize);
  }
  ctx.stroke();

  window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);

<canvas></canvas>

Answer 1

我认为解决方案是将 ctx.lineWidth = 2 移动到 requestAnimationFrame 内。当我手动更改宽度时，我看到相同的行为，线宽默认。所以这里是解决您问题的工作 fiddle :

https://jsfiddle.net/ibowankenobi/skgn9q51/2/

function draw() {

  ctx.fillStyle = '#e8e8e8';
  ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
 ctx.lineWidth = 2;
......

我认为这种行为是有意为之的。因此，要获取 lineWidth，您可能需要求助于 save() Restore();