проблема с appendChild холст не включает консоль TypeError JS - PullRequest
Новая
       9

проблема с appendChild холст не включает консоль TypeError JS

0 голосов
/ 22 ноября 2018

у меня появилось сообщение об ошибке из консоли

это код js

сообщение консоли: Uncaught TypeError: Невозможно прочитать свойство 'appendChild' из null в file1.js:15 

// Create the Canvas On Page

var myPageCanvas = document.createElement('canvas');

// Assign ID to this canvas

myPageCanvas.id = 'c';
myPageCanvas.width = 600;
myPageCanvas.height = 100;
myPageCanvas.style.display = 'block';
myPageCanvas.style.margin = '50px auto';

// Add the canvas to the Page

document.body.appendChild(myPageCanvas);

// Get Canvas information

var mycanvas = document.getElementById('c');

myContext = mycanvas.getContext('2');

// fill and style option

myContext.fillStyle = '#f00';
myContext.strokeStyle = '#00f';
myContext.lineWidth = 4;
myContext.font = '100px Arial';

// add the text

myContext.fillText('Elzero Web School', 50, 80);

Ответы [ 3 ]

0 голосов
/ 23 ноября 2018

Проблема может заключаться в том, что вы загружаете скрипт перед телом. Вы должны загрузить скрипт после тега тела.Например: 

<!DOCTYPE html>
<html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  </head>
     <body>
      <h1>Body content</h1>
     </body>
 <script>

var myPageCanvas = document.createElement('canvas');

// Assign ID to this canvas

myPageCanvas.id = 'c';
myPageCanvas.width = 600;
myPageCanvas.height = 100;
myPageCanvas.style.display = 'block';
myPageCanvas.style.margin = '50px auto';

// Add the canvas to the Page

document.body.appendChild(myPageCanvas);

// Get Canvas information

var mycanvas = document.getElementById('c');

myContext = mycanvas.getContext('2d');

// fill and style option

myContext.fillStyle = '#f00';
myContext.strokeStyle = '#00f';
myContext.lineWidth = 4;
myContext.font = '100px Arial';

// add the text

myContext.fillText('Elzero Web School', 50, 80);
</script>
</html>

Или включить файл js после загрузки тела: 

<!DOCTYPE html>
<html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  </head>

     <body>
      <h1>Body content</h1>
     </body>

     <script src="path/to/file.js"></script>

</html>
0 голосов
/ 23 ноября 2018

протестируйте ваш код, и единственная ошибка, которую я получил, была 

Uncaught TypeError: Cannot set property 'fillStyle' of null

Это потому, что в контексте вы должны использовать 2d вместо 2, после этого все работает хорошо.

Единственное единственноеЧтобы воспроизвести вашу ошибку, используйте файл HTML, который не содержит тега body или, возможно, вы вызываете сценарий перед тегом body в структуре HTML.

Это пример работы.https://jsfiddle.net/v4e0twd5/

0 голосов
/ 23 ноября 2018

Это не твоя проблема.Ваш контекст не записывается в myContext var.Чтобы доказать это, вы можете console.log(mycanvas) ≈, и вы увидите, что это действительно там.

Изменить: 

myContext = mycanvas.getContext('2');

На: 

myContext = mycanvas.getContext('2d');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...