Question

This MDN article（引用this blog post）教授如何将HTML内容呈现给画布。我已经在我的项目中实现了它并且它可以工作。

但是＆＃34;视网膜＆＃34;显示时，它仅以显示屏支持的全分辨率的一半绘制到画布。例如，如果我有一个画布，我在其上呈现HTML字符串＆＃34; Hello＆＃34;在画布旁边我放了一个<span>Hello</span>，后者（由浏览器以常规方式呈现）比前者更平滑，更清晰（在画布上呈现为HTML，使用上面链接中的技术，使用一个SVG和一个Image）。

我相信有一种检测视网膜显示的方法，因此我知道何时需要更高的分辨率，在this source code中给出。但当我发现我在视网膜显示器上时，我的问题是：

是否有一种方法可以在完整的视网膜分辨率下将HTML渲染到画布上？

Answer 1

看看这个post

var image   = new Image();
var ratio   = window.devicePixelRatio || 1;
var canvas  = document.querySelector("canvas");
var context = canvas.getContext("2d");

// 1. Ensure the element size stays the same.
canvas.style.width  = canvas.width + "px";
canvas.style.height = canvas.height + "px";

// 2. Increase the canvas dimensions by the pixel ratio.
canvas.width  *= ratio;
canvas.height *= ratio;

image.onload = function() {
  // 3. Scale the context by the pixel ratio.
  context.scale(ratio, ratio);
  context.drawImage(image, 0, 0);
};
image.src = "/path/to/image.svg";

我试过了 - 它有效！

在Retina显示器上将HTML渲染到Canvas

1 个答案: