javascript - Fullscreen rectangle in Canvas (Android/iOS web app)(javascript - Canvas 中的全屏矩形(Android/iOS 网络应用程序))
问题描述
我在尝试使用 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;
}
这篇关于javascript - Canvas 中的全屏矩形(Android/iOS 网络应用程序)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:javascript - Canvas 中的全屏矩形(Android/iOS 网络应用程序)
基础教程推荐
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01