Question

尝试使用Canvas在整个浏览器视口上渲染矩形时遇到问题。下面的代码在桌面上工作正常，但在移动设备上（在iPad mini，Nexus 7和Galaxy S4上测试），矩形只填充屏幕的一部分（大约一半在iPad上，三分之二在其他设备上）。

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的值是正确的。即使我使用硬编码值作为矩形的宽度/高度，我也得到相同的结果。

解决方案：

基于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();

Answer 1

在计算画布大小时，可以使用像素长宽比作为因子。

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;
    }

Answer 2

您可以尝试确保html和body元素都是视口的全宽和高度。包括canvas和body之间的任何祖先。请参阅以下CSS代码：

html,
body {
  width: 100%;
  height: 100%;
}

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

2 个答案: