javascript

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 的值是正确的。即使我使用硬编码值作为矩形的 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();

Answer 1

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

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

Answer 2

您可以在计算 canvas 大小时使用像素纵横比作为一个因素。

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

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

javascript - Fullscreen rectangle in Canvas (Android/iOS web app)

canvas

html5-canvas

web