html - 如何在html5 Canvas 中绘制1厘米宽的正方形？

使用 canvas API 在白色背景上绘制黑色方块很容易。

尽管如此，许多设备都有不同的 window.devicePixelRatio 值，但即使有，像素的物理大小也可能不同。

可以使用 HTML5 API 检索所需的缩放因子吗？

如果没有，如何使用更底层的主机操作系统 API(比如 linux、windows、android、ios、osx ...

最佳答案

真的没有办法知道屏幕上的 1 厘米有多大。浏览器只有一个通用的屏幕 DPI 概念，通常为 96 DPI。但是，您可能坐在 19 英寸或 32 英寸的显示器旁——浏览器不会知道，假设它们由相同数量的像素定义，则它们之间的 1 厘米大小会有很大不同。

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

老技术方法

我制作了这个简单的工具(见下文)来进行基本校准——它不会给你一个科学上精确的结果，但一个足够接近的结果。是的，您必须在屏幕上放置一个物理标尺来测量和调整滑块，以便线条与标尺匹配。这当然不是要求用户做的那么实际，这是一个缺点......(可以修改为采用已知大小的已知对象)。根据需要分离 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>

关于html - 如何在html5 Canvas 中绘制1厘米宽的正方形？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36645357/