Question

我正在测试此示例代码，但得到了错误

未捕获的TypeError：无法将属性'width'设置为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

您必须使用样式从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;

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

3 个答案: