我试图用HTML画布表示LED矩阵的闪烁。对我来说，重要的是每个LED的尺寸和它们之间的距离代表了它们在现实世界中的真实尺寸(例如，以毫米为单位)。
如果我在一台计算机上找到一个"像素到毫米"的乘法器(我在我的家用计算机上做了这个实验)，它几乎肯定会在其他计算机上失败(就像它在工作中一样，使用不同的点间距监视器)。
所以，我想知道是否有一种方法可以在画布上绘制物理物体，并以一种与设备无关的方式获得它们的实际视觉尺寸。
我计划只使用台式电脑(也许是笔记本电脑)，所以我不需要手机。
据我所知，从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你可以试试。
当然，这个方法假设屏幕上的像素是正方形的，但它们可能不是。您可以要求用户输入其显示器的宽度和高度，并分别校准它们。但我认为用户更有可能知道对角线的尺寸(至少在我所在的美国)。