如何确保画布在 HDPI 屏幕上看起来不模糊？

Question

如果我使用html画布，在HDPI屏幕上一切看起来都很模糊。我该怎么解决这个问题（用飞镖）？

Answer 1

您基本上需要使画布变大2倍，然后重新缩放。在画布上绘制任何内容之前，运行一些类似的函数：

void fixHDPI() {
  num ratio = window.devicePixelRatio;
  if (ratio != 1) {
    num oldWidth = myCanvas.width, oldHeight = myCanvas.height;
    myCanvas
      ..width = (oldWidth * ratio).round()
      ..height = (oldHeight * ratio).round()
      ..style.width = "${oldWidth}px"
      ..style.height = "${oldHeight}px"
      ..context2D.scale(ratio, ratio);
  }
}

dartpad演示