这是一个 XY 问题,OP 不想要屏幕分辨率,而是文档的分辨率。
将来的读者注意:
如果您也试图获取实际屏幕分辨率,您可能自己陷入了某种XY问题。
如果您想要锐利的像素,获取实际屏幕分辨率并没有太大帮助。
以OP的浏览器缩放为75%并在操作系统缩放为150%的情况下为例,我们得到一个单独的白色像素,
1个白色像素x 0.75 =>无法呈现=>使用周围像素进行反锯齿处理。因此,如果我们说周围像素是黑色的,那么我们现在就有了一个灰色的像素。
而且这仅仅是在浏览器级别上......我们仍然需要通过操作系统缩放算法。
1个灰色像素x 1.5 =>无法呈现=>使用周围像素进行反锯齿处理。然后是一个新的像素,离我们最初的白色像素更远了。
最好的做法是将我们的画布位图大小设置为浏览器报告的大小。这样,只有操作系统缩放会启动。
注意:您可能想尝试检测高密度屏幕,即所谓的Retina®屏幕,它们实际上能够以子像素级别渲染像素,在这种情况下,您可以尝试使用window.devicePixelRatio作为通用缩放因子,但请记住四舍五入,因为浮点比例意味着更多的抗锯齿(没有高密度屏幕将使用2.3个像素来渲染一个像素)。
因此,要检测此文档大小,有多种不同的方法可以实现:
如果您在窗口模式下处理硬编码大小,可以在进入全屏模式时简单地检查window.innerWidth和window.innerHeight:
很遗憾,StackSnippets® iframe不允许全屏模式...
window.onresize = function() {
if (document.fullscreenElement === canvas) {
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
}
draw();
}
document.onfullscreenchange = function() {
if (!document.fullscreenElement) {
W = canvas.width = 500
H = canvas.height = 200;
}
draw();
}
如果您想要更具动态性的内容,您也可以使用CSS来让您知道实际大小。事实上,只要记得将其位图大小设置为显示大小,您就可以通过CSS调整画布大小。
window.onresize = function() {
W = canvas.width = canvas.offsetWidth;
H = canvas.height = canvas.offsetHeight;
draw();
}
canvas::fullscreen {
width: 100vw;
height: 100vh;
}
canvas {
width: 50vw;
height: 50vh;
}