如何确保画布在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 demo