未捕获类型错误:canvas.getContext(...) 不是函数

问题描述 投票:0回答:1

我正在尝试在 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 并需要其智能科学的帮助)

javascript html html5-canvas typeerror
1个回答
0
投票

我添加了几个分号,并且还确保

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>

© www.soinside.com 2019 - 2024. All rights reserved.