我尝试在下面的 Javascript 中调整 Canvas 大小:
'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;
}
})();
但是， Canvas 有时会自行调整大小，有时不会(默认返回 0 * 0，CSS 宽度和高度设置为 100% )。我尝试在网上搜索了一下，没有发现类似的问题。我在这里做错了什么吗？
我正在使用Chrome Version 65.0.3325.181 (Official Build) (64-bit)如果有帮助的话。提前致谢!
编辑 1
我将以下代码行添加到 HTML <head> :
...
<script src="app.js" defer></script>
</head>
defer属性应该导致脚本仅在页面完成解析后加载。
编辑2
以下是我的 CSS:
.board {
display: block;
height: 100%;
width: 100%;
}
因此board.clientWidth和board.clientHeight应该获得正确的尺寸，但有时却没有。
最佳答案
如果脚本在头部，您可能需要先等待文档准备好:
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
// Your code.
}
}
关于javascript - Canvas 有时不会调整宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49491139/