是否可以在具有真实（真实世界）尺寸的 html 画布上绘制？答案

【问题标题】：Is it possible to draw on html canvas with true (real world) dimensions?是否可以在具有真实（真实世界）尺寸的 html 画布上绘制？
【发布时间】：2015-05-16 05:47:49
【问题描述】：

我正在尝试使用 HTML Canvas 来表示 LED 矩阵的闪烁。对我来说重要的是，每个 LED 的尺寸和它们之间的距离代表了它们在现实世界中的真实尺寸（例如，以毫米为单位）。

如果我为一台计算机找到了“像素到限制器”乘数（我为我的家用计算机进行了实验），它几乎肯定会在其他计算机上失败（就像它在工作中所做的那样，使用不同的点间距监视器） .

所以，我想知道是否有一种方法可以在画布上绘制物理事物并以独立于设备的方式获得它们的实际视觉尺寸。

我计划只使用台式电脑（可能是笔记本电脑），所以我的情况不需要移动设备。

【问题讨论】：

进行这种计算可能不切实际。您至少需要以下信息：devicePixelRatio（标准显示为 1x，retina 约为 2x 等），像素显示大小（因设备而异），像素形状，当前浏览器缩放级别，当前 ARIA 设置，屏幕分辨率（# 水平 &显示器上可用的垂直像素），可能还有更多我没有想到的。我敢肯定，有人拥有一个包含大多数设备所需信息的数据库——价格实惠！
我喜欢你在评论中提出的想法。在平面屏幕上绘制一个常见的、已知大小的对象（例如，一些货币纸币会提供一个很好的样本大小）。然后让用户将相同的真实对象放在屏幕上的图像上。然后用户可以使用范围控件来调整大小，直到 2 个对象的大小相同。

标签： javascript html canvas dpi

【解决方案1】：

据我所知，从 HTML 页面中可靠地检测显示器的物理尺寸是不可能的。你只能知道它有多少像素。

如果这是一个硬性要求，我最好的建议是让用户以某种方式校准应用程序。也许你可以问他们他们的显示器有多大，然后根据它来扩展你的应用程序。

这里有一个简单粗暴的例子来说明如何做到这一点：

<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">

    function recalculate()
    {
        var mmPerInch = 25.4;
        var textBoxValue = document.getElementById("input_inchsize").value;
        var monitorSizeInInches = parseInt(textBoxValue);
        if(!monitorSizeInInches)
        {
            alert("Invalid monitor size");
            return;
        }

        var screenDiagonalInPixels = Math.sqrt((screen.width * screen.width) + (screen.height * screen.height));
        var screenPixelsPerMm = screenDiagonalInPixels / (monitorSizeInInches * mmPerInch);

        draw100MmSquare(screenPixelsPerMm);
    }

    function draw100MmSquare(pixelsPerMm)
    {
        var canvas = document.getElementsByTagName("canvas")[0];
        var context = canvas.getContext('2d');

        context.fillStyle = "rgb(255,00,00)";
        context.fillRect (0,0,100 * pixelsPerMm,100 * pixelsPerMm);
    }

    window.addEventListener("load", function() { 
        document.getElementById("button_calibrate").addEventListener("click", recalculate, false);
    }, false);
</script>       
</head>
<body>
    <p>How big is your monitor, in inches?</p>
    <input type="number" id="input_inchsize">
    <button id="button_calibrate">Calibrate</button>
    <p>After hitting "Calibrate", a box should appear below that measures 100mm to a side on your screen</p>
    <canvas width="1000" height="1000">

    </canvas>
</body>
</html>

这是JSFiddle you can try.

当然，此方法假定屏幕上的像素是正方形的，但它们可能不是。您可以要求用户输入其显示器的宽度和高度，并分别进行校准。但我认为用户更有可能知道以英寸为单位的对角线尺寸（至少在我所在的美国）。

【讨论】：

好主意。我会进一步建议，例如，使用众所周知大小的对象（硬币），放在显示器上，然后拖动/捏合直到匹配。这对于移动显示可能很好（厘米/英寸标尺显示也经常用于此目的）。
@heltonbiker 这是一个好方法。我在这里的回答只是一个概念验证。它可以变得更加用户友好。
Here is a way 手动校准显示器 DPI (PPI)。