相关疑难解决方法(0)

画布图像线条模糊

我有一个<div style="border:1px solid border;" />和帆布,使用以下方式绘制:

context.lineWidth = 1;
context.strokeStyle = "gray";

Run Code Online (Sandbox Code Playgroud)

绘图看起来相当模糊(lineWidth小于1创建更糟糕的图片),并且没有任何接近div的边界.是否可以使用画布获得与HTML相同的绘图质量？

var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2, 2);
ctx.lineTo(98, 2);
ctx.lineTo(98, 98);
ctx.lineTo(2, 98);
ctx.lineTo(2, 2);
ctx.stroke();

Run Code Online (Sandbox Code Playgroud)

div {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
canvas, div {background-color: #F5F5F5;}
canvas {border: 1px solid white;display: block;}

Run Code Online (Sandbox Code Playgroud)

<table>
<tr><td>Line on canvas:</td><td>1px border:</td></tr>
<tr><td><canvas id="canvas" width="100" height="100"/></td><td><div>&nbsp;</div></td></tr>
</table>

Run Code Online (Sandbox Code Playgroud)

html5 canvas

作者

2016 01-09

45
推荐指数

7
解决办法

4万
查看次数

我使用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>

Run Code Online (Sandbox Code Playgroud)

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

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