Как исправить "TypeError: Невозможно установить свойство 'width' из null"? - PullRequest
0 голосов
/ 19 февраля 2019

Я тестировал этот пример кода и получил ошибку

Uncaught 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>

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019
<!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;
0 голосов
/ 16 мая 2019

У меня была та же проблема, что сработало, так как я изменил положение моего тега скрипта.Автоматически, когда я генерирую свой 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>
0 голосов
/ 19 февраля 2019

Вы должны использовать стиль , чтобы изменить css с js.

canvas.style.width = Math.min(dim.w, window.innerWidth - 20);
canvas.style.height = Math.min(dim.h, window.innerHeight - 20);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...