在Retina显示器上渲染HTML到画布

Rendering HTML to Canvas on Retina displays

本文关键字：HTML Retina 显示器      更新时间：2023-09-26

这篇MDN文章(引用这篇博客文章)教授如何将HTML内容呈现到画布上。我已经在我的项目中实现了它，它工作了。

但是在"视网膜"显示器上，它只以显示器支持的全分辨率的一半绘制到画布上。例如，如果我有一个画布，我在上面呈现HTML字符串"Hello"，在画布旁边我放了一个<span>Hello</span>，后者(由浏览器以通常的方式呈现)比前者(作为HTML呈现到画布上，使用上面链接中的技术，使用SVG和Image)更流畅和清晰。

我相信有一种方法来检测视网膜显示，这样我就知道什么时候需要更高的分辨率，在这个源代码中给出。但是当我检测到我在视网膜显示器上时，我的问题是:

是否有一种方法可以在全视网膜分辨率下呈现HTML到画布?

看这篇文章

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";

我试过了，很管用!

相关文章：