Question

Drawing a black square on white background is easy using canvas API.

Nevertheless, a lot of devices have different window.devicePixelRatio values, but even if they do, the physical size of a pixel might differ.

Can the needed scaling factor be retrieved using HTML5 APIs?

If not, how it can be determined using more low level host OS APIs (lets say, linux, windows, android, ios, osx ...

Answer 1

实际上没有办法知道屏幕上有多大1厘米。浏览器只有一个通用的屏幕DPI概念，通常是96 DPI。然而，你可能坐在一台19英寸或32英寸的显示器上 - 浏览器不知道，假设它们由相同数量的像素定义，它们之间的大小差异很大。

您必须通过物理测量尺寸手动校准每台显示器，然后将其转换为浏览器时每厘米或英寸的像素数。

旧技术方法

我制作了这个简单的工具（见下文）进行基本校准 - 它不会给你一个科学上准确的结果，但结果足够接近。是的，您必须在屏幕上放置一个物理标尺来测量和调整滑块，以使线条与标尺匹配。当然，要求用户这样做是不太实际的，这是一个缺点......（可以修改它以取代已知大小的已知对象）。根据需要分开X / Y.

当您为屏幕设置DPI（或PPI）时，您可以将其用作屏幕上任何内容的比例因子，以及屏幕上其他方向的反转（1 / ppi）路径等。

比例因子的计算方法是将结果除以96.

var c = document.querySelector("canvas"),
    ctx = c.getContext("2d"),
    rng = document.querySelector("input");

ctx.translate(0.5, 0.5);
ctx.font = "16px sans-serif";
ctx.fillStyle = "#c00";

(rng.oninput = render)();

function render() {
  var v = +rng.value, sepDist = 4;                    // 4"
  
  ctx.clearRect(-0.5, -0.5, c.width, c.height);
  ctx.strokeRect(0, 0, v, v);                         // draw 1:1 pixels:ppi
  ctx.fillText(v + " PPI", 10, 20);
  
  // draw marks which should be 4 inches apart
  ctx.fillRect(0, 0, 3, 140);
  ctx.fillRect(96 * sepDist * (v / 96), 0, 3, 140);  // assuming 96 DPI base resolution
  ctx.fillText("------  Should be 4 inches apart ------", 50, 140);
  ctx.fillText((v / 96).toFixed(2) + "x (96 DPI)", 10, 40);
}

<label>Adjust so square below equals 1x1 inch:
<input type=range value=96 min=72 max=150></label>
<canvas width=630 height=300></canvas>

How to draw a 1cm wide square in html5 canvas?

1 个答案:

旧技术方法