javascript - 调整大小时画布会导致图像模糊

Question

在画布上绘制图像时，它们看起来很好，devicePixelRatio等于 2。当比率设置为 1 时，图像是模糊的。如果我将显示缩放设置为 200%（devicePixelRatio = 2），它会再次变得清晰。它也仅在调整图像大小时发生。如果您跳过fitToBox通话并将画布放大以便您可以看到它，则图像看起来很好。这是一个演示https://jsfiddle.net/7oc1e3ja/

const getImageFromUrl = (context, url, coords) => {
  return new Promise(resolve => {
    let img = new Image();
    img.src = url;

    img.onload = () => {
      fitToBox(img, coords);
      context.drawImage(img, coords.left, coords.top, img.width, img.height);
      resolve(img);
    }
  });
};

const fitToBox = (item, box) => {
    let ratio = Math.min(box.width / item.width, box.height / item.height);
    item.width *= ratio;
    item.height *= ratio;
};

const config = {
  imageUrl: 'https://i.imgur.com/y6viWyU.png',
  canvas: { width: 300, height: 300 },
};

let box = { ...config.canvas, top: 0, left: 0 },
    dpr = window.devicePixelRatio || 1,
    canvas = document.getElementById('c'),
    context = canvas.getContext('2d');

canvas.width = config.canvas.width * dpr;
canvas.height = config.canvas.height * dpr;
canvas.style.width = config.canvas.width + 'px';
canvas.style.height = config.canvas.height + 'px';
context.scale(dpr, dpr);

getImageFromUrl(context, config.imageUrl, box)
  .then(img => document.body.appendChild(img));

标签： javascriptcanvas

Answer 1

只需简单地更新您的逻辑以计算dpr价值：

dpr = Math.max(window.devicePixelRatio || 2, 2),

在这种情况下，您将拥有 HiDPI 画布。