如何修复HTML5画布中形状模糊的边缘？

Question

我使用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上放大了。

Answer 1

还有一种 css 方式可以使用该image-rendering属性来执行此操作。

canvas {
  /* all four are needed to support the most browsers */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* optional: can also be applied to `img` tags */

例如，这非常适合放大像素艺术。它会保留边缘，并且在放大或放大时不会模糊它们。

为了使其按预期工作，重要的是您的图像和形状是在整个像素上绘制的，不要这样做：context.rect(1.5, 1.5, 2, 2)。虽然它不会模糊，但它会用不同的颜色绘制半像素。如果动态计算仓位，则四舍五入到最接近的整数。

目前需要供应商前缀和重复属性来支持所有主要浏览器。仅Chrome/Webkit支持pixelated，仅Firefox crisp-edges。（2021 年中）

caniuse浏览器支持

MDN 像素艺术教程

Answer 2

我弄清楚出了什么问题。这是device-pixel-ratio设备的属性。值以外的任何东西1都会导致像素化画布内容。在浏览器中调整缩放device-pixel-ratio比例会发生变化，某些设备具有较高的设备像素比率，例如视网膜显示屏iPhone。

您必须使用Java脚本解决此问题。没有别的办法了。我在博客上更详细地介绍了此内容，并提供了其他一些来源。

您可以在下面看到最终结果。

使用香草JavaScript的自适应画布：

var aWrapper = document.getElementById("aWrapper");
var canvas = document.getElementById("myCanvas");

//Accesses the 2D rendering context for our canvasdfdf
var ctx = canvas.getContext("2d");

function setCanvasScalingFactor() {
   return window.devicePixelRatio || 1;
}

function resizeCanvas() {
    //Gets the devicePixelRatio
    var pixelRatio = setCanvasScalingFactor();

    //The viewport is in portrait mode, so var width should be based off viewport WIDTH
    if (window.innerHeight > window.innerWidth) {
        //Makes the canvas 100% of the viewport width
        var width = Math.round(1.0 * window.innerWidth);
    }
  //The viewport is in landscape mode, so var width should be based off viewport HEIGHT
    else {
        //Makes the canvas 100% of the viewport height
        var width = Math.round(1.0 * window.innerHeight);
    }

    //This is done in order to maintain the 1:1 aspect ratio, adjust as needed
    var height = width;

    //This will be used to downscale the canvas element when devicePixelRatio > 1
    aWrapper.style.width = width + "px";
    aWrapper.style.height = height + "px";

    canvas.width = width * pixelRatio;
    canvas.height = height * pixelRatio;
}

var cascadeFactor = 255;
var cascadeCoefficient = 1;

function draw() {
  //The number of color block columns and rows
  var columns = 5;
  var rows = 5;
  //The length of each square
  var length = Math.round(canvas.width/columns) - 2;
  
  //Increments or decrements cascadeFactor by 1, based on cascadeCoefficient
  cascadeFactor += cascadeCoefficient;

  //Makes sure the canvas is clean at the beginning of a frame
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = columns; i >= 1; i--) {  
    for (var j = rows; j >= 1; j--) {
      //Where the color magic happens
      ctx.fillStyle = "rgba(" + (j*i*(cascadeFactor-110)) + "," + (i*cascadeFactor) + "," + (j*cascadeFactor) + "," + 0.6 + ")";
        
      ctx.fillRect((length*(i-1)) + ((i-1)*2), (length*(j-1)) + ((j-1)*2), length, length);
    }
  }
  
  if (cascadeFactor > 255 || cascadeFactor < 0) {
    //Resets the color cascade
    cascadeCoefficient = -cascadeCoefficient;
  }
  //Continuously calls draw() again until cancelled
  var aRequest = window.requestAnimationFrame(draw);
}

window.addEventListener("resize", resizeCanvas, false);

resizeCanvas();
draw();

#aWrapper {
    /*Horizontally centers the canvas*/
    margin: 0 auto;
}

#myCanvas {
    /*This eliminates inconsistent rendering across browsers, canvas is supposed to be a block-level element across all browsers anyway*/
    display: block;

    /*myCanvas will inherit its CSS width and style property values from aWrapper*/
    width: 100%;
    height: 100%;
}
asdfasdf

<div id="aWrapper">
    <!--Include some fallback content on the 0.00001% chance your user's browser doesn't support canvas -->
    <canvas id="myCanvas">Fallback content</canvas>
</div>