Fatal编程技术网
  • javascript/
  • Javascript 画布不存在问题'；不包括TypeError JS控制台

Javascript 画布不存在问题'；不包括TypeError JS控制台

javascript html css canvas html5-canvas

Javascript 画布不存在问题'；不包括TypeError JS控制台,javascript,html,css,canvas,html5-canvas,Javascript,Html,Css,Canvas,Html5 Canvas,我从控制台收到一条错误消息 这是js代码 控制台消息：Uncaught TypeError:无法读取null的属性“appendChild” 在file1.js:15 //在页面上创建画布 var myPageCanvas=document.createElement（'canvas'）； //将ID分配给此画布 myPageCanvas.id='c'； myPageCanvas.width=600； myPageCanvas.height=100； myPageCanvas.style.di

我从控制台收到一条错误消息

这是js代码

控制台消息：Uncaught TypeError:无法读取null的属性“appendChild” 在file1.js:15

//在页面上创建画布
var myPageCanvas=document.createElement（'canvas'）；
//将ID分配给此画布
myPageCanvas.id='c'；
myPageCanvas.width=600；
myPageCanvas.height=100；
myPageCanvas.style.display='block'；
myPageCanvas.style.margin='50px自动'；
//将画布添加到页面
document.body.appendChild（myPageCanvas）；
//获取画布信息
var mycanvas=document.getElementById（'c'）；
myContext=mycanvas.getContext（'2'）；
//填充和样式选项
myContext.fillStyle='#f00'；
myContext.strokeStyle='#00f'；
myContext.lineWidth=4；
myContext.font='100px Arial'；
//添加文本

myContext.fillText（'Elzero网络学校'，50,80）这不是你的问题。您的上下文没有被记录到
myContext
var中。要证明这一点，您可以
console.log（mycanvas）
≈ 你会看到它实际上就在那里

更改：


myContext = mycanvas.getContext('2');


致：


问题可能是在主体之前加载脚本。应该在主体标记之后加载脚本。例如：


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




身体内容
var myPageCanvas=document.createElement（'canvas'）；
//将ID分配给此画布
myPageCanvas.id='c'；
myPageCanvas.width=600；
myPageCanvas.height=100；
myPageCanvas.style.display='block'；
myPageCanvas.style.margin='50px自动'；
//将画布添加到页面
document.body.appendChild（myPageCanvas）；
//获取画布信息
var mycanvas=document.getElementById（'c'）；
myContext=mycanvas.getContext（'2d'）；
//填充和样式选项
myContext.fillStyle='#f00'；
myContext.strokeStyle='#00f'；
myContext.lineWidth=4；
myContext.font='100px Arial'；
//添加文本
myContext.fillText（'Elzero网络学校'，50,80）；


或在主体加载后包含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>




身体内容

测试代码，我得到的唯一错误是


Uncaught TypeError: Cannot set property 'fillStyle' of null


这是因为在上下文中，应该使用2d而不是2
之后一切都很顺利

重现错误的唯一方法是使用一个不包含body标记的HTML文件，或者在HTML结构中调用body标记之前调用脚本

这就是工作的例子。

我用过第一个，它没有控制台消息，用过第二个，内容显示在浏览器中，但我仍然收到控制台消息，所以订购时出现问题？非常感谢你的帮助是的，你是对的，我曾经在正文内容出现后调用JS文件，但仍然出错是的，你是对的，我忘了，非常感谢你的帮助，非常欢迎。请考虑如下：

Uncaught TypeError: Cannot set property 'fillStyle' of null