Question

如何修复“TypeError：无法将属性‘width’设置为 null”？

2019-02-19

3397

javascript html canvas

我正在测试此示例代码，并收到错误

Uncaught TypeError: Cannot set property 'width' of null

其中“canvas.width = ...”。你能帮我吗？这里是代码：

var canvas = document.getElementById("sim00");
var dim = {
  w: 600,
  h: 480
};
canvas.width = Math.min(dim.w, window.innerWidth - 20);
canvas.height = Math.min(dim.h, window.innerHeight - 20);

canvas {
  border: 1px solid #d3d3d3;
  max-width: 100%;
  height: auto;
}

<canvas id="sim00" width="300" height="300"></canvas>

Answer 1

我遇到了同样的问题，我改变脚本标签的位置后，问题就解决了。当我生成 HTML 框架时，脚本标签会自动出现在 <head>
但将其放入 <body> 后，我的代码就可以正常工作了。

<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>

    <canvas id="canvas" width="1950px" height="800px"></canvas>
    <canvas id="canvasbg" width="1950px" height="800px"></canvas>

</body>

</html>

<html>
<head>

</head>

<body>
    <canvas id="canvas" width="1950px" height="800px"></canvas>
    <canvas id="canvasbg" width="1950px" height="800px"></canvas>

<!-- I omitted some code for simplicity. -->
<!-- Bottom line, Check the placement of your js file. -->
<script type="text/javascript" src="main.js"></script>
</body>

</html>

Answer 2

您必须使用 style 将 js 更改为 css。

canvas.style.width = Math.min(dim.w, window.innerWidth - 20);
canvas.style.height = Math.min(dim.h, window.innerHeight - 20);

Answer 3

<!DOCTYPE html>
<html>

<body>
  <div id="container">
    <canvas id="myCanvas" width=350 height=250>

    </canvas>
  </div>
</body>
</html>

要更改大小，请使用

var myCanvas = document.querySelector("#myCanvas");
myCanvas.width = 350;
myCanvas.height = 250;