HTML
<!DOCTYPE html>
<div align="center">Draw here</div>
<div id="drawing" style="border-style: solid" ><canvas id="canvas" style="border-style: dotted"></canvas></div>
<script src="canvas.js"></script>
canvas.js
window.addEventListener('load',()=>{
const canvas=document.querySelector('#canvas');
const div=document.querySelector('#drawing');
const ctx=canvas.getContext("2d");
canvas.height=div.clientHeight;
canvas.width=div.clientWidth;
window.onresize = function () {
canvas.height=div.clientHeight;
canvas.width=div.clientWidth;
}
我希望canvas位于div内部，大小与canvas相同，这样每当div的大小更改时，canvas也应相应更改。 画布也应该改变大小。 我试过做上面的代码，但它不工作，大小不变。
在JS中，您缺少一个右括号。
您似乎正在从多个来源获取代码，因为您似乎正在使用jQuery（不要忘记将其包含在HTML中），ES2015之前的函数（）{}以及新样式()=>； {}箭头函数。
window.addEventListener('load',()=>{
const canvas=document.querySelector('#canvas');
const div=document.querySelector('#drawing');
const ctx=canvas.getContext("2d");
canvas.height=div.clientHeight;
canvas.width=div.clientWidth;
window.onresize = function () {
canvas.height=div.clientHeight;
canvas.width=div.clientWidth;
} // Needs to be here
}
