dart - 如何确保 Canvas 在HDPI屏幕上看起来不模糊？

Question

如果我使用html Canvas ，则HDPI屏幕上的一切看起来都很模糊。我该如何解决(使用 Dart )？

Answer 1

基本上，您需要将 Canvas 放大2倍，然后再缩放。在将任何内容绘制到 Canvas 上之前，请运行以下函数:

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