我正在尝试在 HTML Canvas 中制作一个项目,但反复遇到此错误。我明白了 1) 当我使用
document.createElement
然后调用 canvas.getContext
2) 当我创建 <canvas id="canvas"></canvas>
然后使用 document.getElementById
然后执行 canvas.getContext
HTML
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pythagoras Theorum Proof</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./script.js"></script>
</body>
</html>
JS
:
/**
* @type {HTMLCanvasElement}
*/
const canvas = document.getElementById("canvas")
/**
* @type {CanvasRenderingContext2D}
*/
const ctx = canvas.getContext("2d")
(window.addEventListener("resize", () => {
canvas.width = window.innerWidth; canvas.width = window.innerHeight
}))()
canvas.style.border = "2px solid black"
(我需要 JSDoc 将
canvas
识别为 HTMLCanvasElement
并将 ctx
识别为 CanvasRenderingContext2D
,因为我使用 VS Code 并需要其智能科学的帮助)
我添加了几个分号,并且还确保
addEventListener
的返回值不会被调用。您添加一个用于调整大小的事件侦听器,这很酷。不要调用结果,因为addEventListener
不返回任何东西,参见https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener,即返回undefined
,这不是一个函数,因此你不能调用它。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
window.addEventListener("resize", () => {
canvas.width = window.innerWidth; canvas.width = window.innerHeight;
console.log("resized");
});
canvas.style.border = "2px solid black";
<canvas id="canvas"></canvas>