HTML画布意外更改颜色

Question

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

如果您无法重现该行为， 则以下是该行为的视频 。

 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内。 当我手动更改宽度时，我看到相同的行为，线宽为默认值。 因此，这里正在解决您的问题的小提琴：

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（）;。