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