小编Pea*_*aru的帖子

我使用canvas元素制作了一个非常简单的矩形。但是，如果fillRect（x，y，width，height）中x和y的参数为0和0以外的任何值，则放大和/或在移动设备上时，所有边缘看起来都完全模糊。如果x和y分别为0和0，则即使放大，矩形的顶部和左侧边缘也是超定义的，而底部和右侧边缘则模糊。我正在使用Chrome / Firefox在1920x1080屏幕上以及使用Safari在750x1334手机屏幕上渲染此图像。

放大到100％时，在台式机上这不是问题，但在移动设备上看起来像废话。如果在Chrome和Firefox以及JSFiddle上完全放大，则可以清楚地看到边缘模糊。我不使用CSS调整画布上的宽度和高度。使用canvas属性和/或JS完成。我用来在浏览器上测试的HTML如下。

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    </head>

    <body>
         <canvas id="gameCanvas" width="150" height="150">A game.</canvas>

         <script>
             var canvas = document.getElementById("gameCanvas");
             var ctx = canvas.getContext("2d");

             ctx.fillRect(0, 0, 100, 100);
         </script>
    </body>
</html>

编辑：我不是想画一条1像素的线。我也尝试使用半像素值进行实验，但这会使模糊边缘变得更加糟糕。

前两个屏幕截图分别来自Safari上的iPhone 7屏幕（非缩放和缩放）。最后一张屏幕截图是在1920x1080笔记本电脑屏幕上，在Chrome上放大了。