Question

将浏览器缩放设置为150％并在画布上绘制线条时，线条模糊。当我将画布的宽度和高度加倍并使用css将其缩小到原始宽度和高度时，线条很清晰。

顶部三角形模糊而底部三角形清晰： http://jsbin.com/acimiq/1

是浏览器错误，操作系统错误还是错过了什么？

相关

我在Windows 7上测试了Chrome 27，FF 22和IE 10。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>canvas test</title>
<style id="jsbin-css">
#canvas1 {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit
                                                //  (Safari now, Chrome soon)
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: optimize-contrast;         // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE
}

#canvas2 {
  width: 300px;
  height: 150px;
}
</style>
</head>
<body>
  <canvas id="canvas1" width="300" height="150"></canvas>
  <br/>
  <canvas id="canvas2" width="600" height="300"></canvas>
<script>
    var canvas1 = document.getElementById('canvas1');
    var ctx1 = canvas1.getContext('2d');
    ctx1.imageSmoothingEnabled = false;
    ctx1.webkitImageSmoothingEnabled = false;
    ctx1.mozImageSmoothingEnabled = false;
    ctx1.beginPath();
    ctx1.moveTo(125,125);
    ctx1.lineTo(125,45);
    ctx1.lineTo(45,125);
    ctx1.closePath();
    ctx1.stroke();

    var canvas2 = document.getElementById('canvas2');
    var ctx2 = canvas2.getContext('2d');
    ctx2.scale(2, 2);
    ctx2.beginPath();
    ctx2.moveTo(125,125);
    ctx2.lineTo(125,45);
    ctx2.lineTo(45,125);
    ctx2.closePath();
    ctx2.stroke();
</script>
</body>
</html>

Answer 1

如果您想避免模糊的线条或浏览器缩放问题，请使用SVG（可缩放矢量图形）。您现在可以在html5中的html文件中编写。

在SVG上查看wikipedia's entry或w3school's entry了解详情。

查看this site何时使用Canvas vs SVG：

Answer 2

画布不知道缩放或浏览器中的任何其他内容。如果放大浏览器并不重要，画布上绘制的内容将随时间绘制，因为用于画布的位图具有固定大小，无论浏览器显示什么缩放它at /那是一个后画布流程。）

您无法禁用浏览器的插值等。当你缩放浏览器时，它会像任何图像一样看到画布元素，并且会像对待图像那样放大它。

如果你在画布之后绘制一条线像往常那样将线条渲染到画布上，那么在更新时，浏览器会刷新所需的一切，如果绘制了一条新线条，画布将被重新绘制 - 作为图像 - 只需使用新的内容。

Canvas不了解浏览器，浏览器不知道画布内部有什么，除了它有一些像素。

使用浏览器缩放在HTML5画布上绘制清晰的线条

2 个答案: