javascript - 了解 HTML Retina Canvas 支持

Question

最近我开始接触 HTML canvas绘图和视网膜支持它。没有在 canvas 上绘制进一步的配置线-元素在视网膜显示器上看起来有点模糊。

我知道视网膜显示器的像素是它的四倍，因此默认情况下必须填充一些设备像素(否则图片将只有预期大小的一半)。

示例:
绘制 HTML canvas与 width: 50px和 height: 50px .

<canvas height="50px" width="50px">

正常 屏幕上的浏览器只是绘制它(50*50 像素)。视网膜显示器上的浏览器接收 50x50px Canvas ，但由于它是视网膜 50*50 设备像素会比预期的要小。因此浏览器在视网膜上绘制 100*100 像素。

Canvas 上的清晰线条(黑色/白色单像素线条)现在变得有点模糊，因为浏览器必须填充附近的像素并使用附近的周围环境 - 一些像素变成灰色。

如何解决:
这段代码应该可以解决问题:

// Returns: 1 on 'normal' screens, 2 on retina displays
var PIXEL_RATIO = (function () {
    var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1;

    return dpr / bsr;
})();


function makeCanvasHiPPI(canvas) {
  canvas.style.width  = canvas.width  + "px";
  canvas.style.height = canvas.height + "px";

  canvas.width  *= PIXEL_RATIO;
  canvas.height *= PIXEL_RATIO;

  var context = canvas.getContext('2d');
  context.scale(PIXEL_RATIO, PIXEL_RATIO)
}

我认为代码的作用:
通过在 Canvas 上使用这段代码，浏览器被告知使用 50*50px(即 canvas.style 设置的值)，如上例所示 - 在普通屏幕上为 50*50px，在视网膜上为 100*100px。 但是它在内部将 Canvas 处理为两倍大小的 Canvas (至少在视网膜设备上)，因此能够绘制通常由浏览器填充的像素。

棘手的部分(我不太明白):
缩放。双'canvas.width'？很好，现在我们可以写入更多像素 - 更多信息。好的。
但现在它被缩放了，因此我们不会真的写入额外的像素(只有 0 - 50 会出现在 Canvas 上)——这次谁来填充设备像素？我在没有缩放的情况下尝试了它，它允许我在 0 - 100 范围内的视网膜(~1 设备像素)上绘制更细的线条——尽管这些像素仍然有点模糊，缩放后的线条更粗，但非常清晰。模糊仅在大量缩放时可见。

专业规模:

• Crystal 线
• 在我的示例中，没有缩放以某种方式没有产生强烈的黑色(在强烈缩放下可见)

Pro 无比例:

• 画细线的能力
• canvas.width真正代表我可以写入的像素。例如:

context.moveTo(0, context.canvas.height/2);
context.lineTo(context.canvas.width, context.canvas.height/2);

有效。这不适用于缩放，因为 context.canvas.width返回未缩放的值。

我的问题:

• 为什么我什至没有自己填充额外的像素，但缩放后线条清晰？
• 我将如何处理误导性的返回值？
• 我应该始终使用 context.canvas.width / PIXEL_RATIO 吗？ (缩放)？这确实解决了问题，但在代码中看起来不太好(OCD 开始)。我会继续这样做，直到我得到更好的东西。

Answer 1

1. 这条线在没有缩放的情况下可能看起来很清晰，因为 Canvas 在您的情况下具有高 dpi 后备存储:http://www.html5rocks.com/en/tutorials/canvas/hidpi/

2. 我不明白有关误导性返回值的问题。一切似乎都非常一致。您是否尝试过在“未缩放”的情况下将线宽设置为 0.5？

3. 这实际上取决于您的用例。如果“未缩放”足够好，那就去吧。否则，如果您需要为您的应用程序控制 DPI，请选择高 DPI 方法。