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

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>

score 2 · Accepted Answer

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

查看wikipedia 的条目或w3school 的SVG 条目以了解更多信息。

查看此站点以了解何时使用 Canvas 与 SVG：

score 1 · Accepted Answer

画布不知道缩放或浏览器中的任何其他内容。如果您在浏览器中放大并不重要，在画布上绘制的内容将像其他任何时间一样在其上绘制，因为用于画布的位图是固定大小的，无论浏览器以何种缩放比例显示它/那是后画布过程）。

您不能为浏览器禁用插值等。发生的情况是，当您缩放浏览器时，它会看到画布元素就像任何图像一样，并且会像处理图像一样放大它。

如果您之后在画布上画一条线，则该线像往常一样呈现到画布上，然后在更新时浏览器会刷新所需的所有内容，如果绘制了一条新线，则将重新绘制画布 - 作为图像 - 仅使用新内容。

画布不知道浏览器，浏览器不知道画布内部除了它包含一些像素之外是什么。

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

2 回答 2

Related

Reference