HTML 画布意外更改颜色答案

【问题标题】：HTML canvas changing colors unexpectedlyHTML 画布意外更改颜色
【发布时间】：2018-10-08 18:26:48
【问题描述】：

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

如果您无法重现该行为，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);

&lt;canvas&gt;&lt;/canvas&gt;

【问题讨论】：

标签： javascript html firefox canvas html5-canvas

【解决方案1】：

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

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

【讨论】：