画布有时无法调整为宽度和高度
[英]Canvas sometimes does not resize to width and height
问题描述
I tried to resize my canvas in Javascript below: 
我尝试使用以下Javascript调整画布大小：
'use strict';
(_ => {
// 'board' is the canvas
const board = document.querySelector('.board');
const ctx = board.getContext('2d');
initialise();
function initialise() {
board.width = board.clientWidth;
board.height = board.clientHeight;
}
})();
However, the canvas sometimes resizes itself, and sometimes don't (defaults back to 0 * 0 with CSS width and height set to 100% ). 但是，画布有时会自行调整大小，有时却不会调整大小（默认宽度返回0 * 0 ，CSS width和height设置为100% ）。 I've tried searching it online and there was nothing like this issue. 我尝试过在线搜索，没有类似的问题。 Is there anything wrong that I've done here? 我在这里做错了什么吗？
I am using Chrome Version 65.0.3325.181 (Official Build) (64-bit) if that helps. 如果有帮助，我正在使用Chrome Version 65.0.3325.181 (Official Build) (64-bit) 。 Thanks in advance! 提前致谢！
Edit 1 编辑1
I added the following line of code to the HTML <head> : 我将以下代码行添加到HTML <head> ：
...
<script src="app.js" defer></script>
</head>
The defer attribute should cause the script to only load after the page has finished parsing. defer属性应导致脚本仅在页面解析完成后才加载。
Edit 2 编辑2
The following is my CSS: 以下是我的CSS：
.board {
display: block;
height: 100%;
width: 100%;
}
Hence board.clientWidth and board.clientHeight should get the correct sizes, but sometimes it doesn't. 因此， board.clientWidth和board.clientHeight应该获得正确的大小，但有时却不正确。
4 个解决方案
解决方案1
0 2018-03-26 12:19:01
If the script is in the head, you probably want to wait for the document to be ready first: 如果脚本位于头部，则可能要先等待文档准备就绪：
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
// Your code.
}
}
解决方案2
0 2018-03-26 12:23:44
You can use requestAnimationFrame for setting the width and height for the canvas. 您可以使用requestAnimationFrame设置画布的宽度和高度。
This solution worked in all my projects and I use the full screen canvas a lot 此解决方案在我的所有项目中都有效，并且我经常使用全屏画布
const requestAnimation = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimation; function getId(id) { return document.getElementById(id); } const canvas = getId('canvas'); function SetUp() { canvas.ctx = canvas.getContext("2d"); Update(); } function Update() { // allmoost fullscreen canvas canvas.width = window.innerWidth * 0.95; canvas.height = window.innerHeight * 0.95; // creates a black rectangle canvas.ctx.fillRect(canvas.width / 4, canvas.height / 4,canvas.width / 2, canvas.height / 2) requestAnimationFrame(Update); } SetUp();
canvas { position: fixed; border: solid red; left: 0px; top: 0px; }
<canvas id="canvas"></canvas>
解决方案3
0
parsed != DOMContentLoaded 已解析！= DOMContentLoaded
Yes, that's the moral of this story that had me scratching my head for days. 是的，这就是这个故事的寓意，让我me了好几天。
defer does not gurantee that the DOM is primed and ready. defer不保证DOM已准备好并准备就绪。 So, the corrected code should be: 因此，更正后的代码应为：
const board = document.querySelector('.board');
const ctx = board.getContext('2d');
initialise();
function initialise() {
document.addEventListener('DOMContentLoaded', () => {
board.width = board.clientWidth;
board.height = board.clientHeight;
});
}
解决方案4
-1 2018-03-26 12:15:45
You're setting the width and height on load, becouse that code runs after load on DOMContentLoaded events, right?. 您正在设置加载时的宽度和高度，因为代码在DOMContentLoaded事件上加载后运行，对吗？ If not set it and also recall the initialize() method on window resize. 如果未设置，则还要在窗口调整大小时调用initialize（）方法。
Something like 就像是
document.addEventListener("resize", initialize);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.