Question

我已经完成了以下页面：https://loving-jepsen-c6f1de.netlify.com/ 它通过从json文件获取数据在画布上绘制像素图像。我使用css属性image-rendering：pixelated在画布上使其工作。但是，当我在chome开发人员工具中调整窗口大小时，画布会晃动，并且画布会丢失像素化。还有，当我单击“在全窗口中打开”调整窗口大小时，画布会丢失像素化。

我使用devtools找出问题所在，它显示出画布仍然具有其图像渲染：像素化（但实际上不起作用）。

第一张图片的JS（4x4）：


let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let btn_load_4x4 = document.getElementById('btn_load_4x4');
btn_load_4x4.addEventListener('click', fillCanvas4x4);

function fillCanvas4x4() {
  fetch(
    'https://raw.githubusercontent.com/rolling-scopes-school/tasks/master/tasks/stage-2/codejam-canvas/data/4x4.json'
  )
    .then(function(resp) {
      return resp.json();
    })
    .then(function(data) {
      canvas.width = 4;
      canvas.height = 4;
      let colors = data.map(el => el.map(el => '#' + el));
      for (let i = 0; i < canvas.width; i++) {
        for (let j = 0; j < canvas.height; j++) {
          ctx.fillStyle = colors[i][j];
          ctx.fillRect(i, j, 1, 1);
        }
      }
    });
}

CSS：


.canvas {
  width: 512px;
  height: 512px;
  padding: 20px;
  image-rendering: pixelated;
}

如何修复：图像渲染：像素化错误

0 个答案: