Question

我有一个应用程序，我想在隐藏的画布上绘制一些图形，然后将它标记在我想要的多个位置，而不是多次绘制相同的图形（为了更好的性能）。目前可以在浮点坐标上绘制图形，同样适用于冲压。在浮点坐标上绘制图像效果很好：图像清晰锐利。但是当我将图像从其他画布复制到相同的浮点坐标时，我会得到模糊的图像。 更有趣的是：只有当目标画布具有较大的宽度/高度时才会模糊！当目标非常小（~20像素）时，结果图像很清晰（在Chrome中）。所以，我的问题是：

为什么在目标画布很大的情况下会出现模糊图像
如何解决或解决这个问题？

以下是演示网址：http://the-coderok.azurewebsites.net/canvas.html 它的代码：它有4个画布。来源是我绘制图形的地方，然后我会在休息时加盖3。

blurrySmall - 小画布，我在浮点坐标处复制图像。它产生清晰的图像。

夏普 - 我将图像复制到int坐标 - 结果很清晰。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset=utf-8>
  <meta name="viewport" content="width=620">
  <title>HTML5 Demo: Canvas</title>
</head>

<body>
  <button id='doDraw'>Draw</button>
  <br>
  <section>
    <canvas id ="source" width="14" height="14" ></canvas>
    <br>
    <hr/>
    <canvas id ="blurrySmall" width="20" height="20"  ></canvas>

    <br />
    <hr/>
    <canvas id ="blurry" width="839" height="839"  ></canvas>
    <br />
    <hr/>
    <canvas id ="sharp" width="839" height="839"  ></canvas>    
  </section>



  <script type="text/javascript">
    var btn = document.getElementById('doDraw');
    btn.onclick = function(ev){
      doDraw();
    };
    /*
    xTranslation = -56.669999999999995
    yTranslation = -589.3000000000001
    */

    function doDraw(){
      var mainCanvas = document.getElementById("source");
      var mainContext = mainCanvas.getContext("2d");
      mainContext.beginPath();
      mainContext.arc(7, 7, 5, 0, 2*Math.PI, true);
      mainContext.closePath();
      mainContext.lineWidth =2;
      mainContext.strokeStyle = "rgba(255,127,14,1)";
      mainContext.stroke();

      var sharpCanvas = document.getElementById("sharp");
      var sharpContext = sharpCanvas.getContext("2d");
      sharpContext.drawImage(mainCanvas, 1, 1);

      var blurryCanvas = document.getElementById("blurry");
      var blurryContext = blurryCanvas.getContext("2d");
      blurryContext.drawImage(mainCanvas, 1.67, 1.3);

      blurryContext.beginPath();
      blurryContext.arc(33.67, 33.3, 5, 0, 2*Math.PI, true);
      blurryContext.closePath();
      blurryContext.lineWidth =2;
      blurryContext.strokeStyle = "rgba(255,127,14,1)";
      blurryContext.stroke();

      var blurrySmallCanvas = document.getElementById("blurrySmall");
      var blurrySmallContext = blurrySmallCanvas.getContext("2d");
      blurrySmallContext.drawImage(mainCanvas, 1.67, 1.3);
    }
  </script>
</body>

</html>

Answer 1

您绘制的图像变为位图。位图由像素组成，并且取决于分辨率。因此，每个像素将根据您复制的位置进行放大或缩小。结果是复制到比原始位图大的位图将导致一些工件扩展。即在这种情况下模糊的图像。

要解决隐藏图像，至少要将其复制到最大画布的分辨率，并且只能缩小。

Answer 2

我能够使用CanvasRenderingContext2D.imageSmoothingEnabled解决这个问题 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled

大画布上的模糊图像，但小

2 个答案: