javascript - Canvas 中的全屏矩形(Android/iOS 网络应用程序)

2022-01-17 00:00:00 canvas web javascript html5-canvas

我在尝试使用 Canvas 在整个浏览器视口上渲染矩形时遇到问题.下面的代码在桌面上运行良好，但在移动设备上(在 iPad mini、Nexus 7 和 Galaxy S4 上测试)，矩形只填充了屏幕的一部分(在 iPad 上大约是一半，在其他设备上是三分之二).

I have a problem trying to render a rectangle over the entire browser viewport using Canvas. The code below works fine on desktop, but on mobile devices (tested on iPad mini, Nexus 7 and Galaxy S4), the rectangle only fills a part of the screen (roughly a half on iPad, two thirds on other devices).

ctx.beginPath();
ctx.rect(0, 0, window.innerWidth, window.innerHeight);
ctx.closePath();

ctx.lineWidth = 5;
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.stroke();
ctx.fillStyle = 'rgba(0,0,0,0.5)';
ctx.fill();

我试过 ctx.scale(1, 1);但这没有用.window.innerWidth 和 window.innerHeight 的值是正确的.即使我使用硬编码值作为矩形的宽度/高度，我也会得到相同的结果.

I tried ctx.scale(1, 1); but that did not work. The values of window.innerWidth and window.innerHeight are correct. And I get the same result even if I use a hardcoded value as the rectangle's width/height.

解决方案:

基于 Ken Fyrstenberg

var ratio = window.devicePixelRatio || 1;
var width = window.innerWidth * ratio;
var height = window.innerHeight * ratio;

ctx.beginPath();
ctx.rect(0, 0, width, height);
ctx.closePath();

ctx.lineWidth = 5;
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.stroke();
ctx.fillStyle = 'rgba(0,0,0,0.5)';
ctx.fill();

推荐答案

在计算画布大小时，可以使用像素纵横比作为一个因素.

You can use pixel aspect ratio as a factor when calculating the canvas size.

var ratio = window.devicePixelRatio || 1;
var width = window.innerWidth * ratio;
var height = window.innerHeight * ratio;

canvas.width = width;
canvas.height = height;

CSS:

#canvasID {
    position: fixed;
    left: 0;
    top: 0;
    }

相关文章