Question

我是Canvas的新手，并在Codepen上尝试过。我一直收到错误 - Uncaught TypeError: Cannot read property 'getContext' of null

我在StackOverflow上读了很多关于同样错误的类似问题，并尝试了一些提供的解决方案，但它们似乎都没有用。

这是因为HTML是在JavaScript之前加载的，因为一些答案似乎暗示了吗？不幸的是，我不认为我可以在Codepen上做出改变。

我也尝试使用jQuery在$( document ).ready(function() {});中包装它，但这也不起作用。

基本上，我有<canvas>元素 - <canvas id="mycanvas" class="orangeback"></canvas> 我正在尝试使用下面的JavaScript创建一个矩形和一些文本 -

function doRed() {
  var id1 = document.getElementById("mycanvas");
  id1.style.backgroundColor = "red";
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  context.fillStyle = "purple";
  context.fillRect(10,10,60,60);

  context.fillStyle = "black";
  context.font = "30px Arial";
  context.text = "Hello";
}

Here's the link to my full code on JSFiddle

如果有人能指出我出了什么问题会很有帮助。谢谢！

Answer 1

您的脚本出现拼写错误myCanvas应该是mycanvas。您还可以多次查询画布，您可以使用变量中document.getElementById()的结果来最小化dom查询。

以下示例：

＆＃13;

// cache result
var canvas = document.getElementById("mycanvas"),
context = canvas.getContext("2d");

function doRed() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  canvas.style.backgroundColor = "red";    
  context.fillStyle = "purple";
  context.fillRect(10,10,60,60);    
  context.fillStyle = "black";
  context.font = "30px Arial";
  context.fillText= "Hello";
}

function doBlue() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  canvas.style.backgroundColor = "blue";
}

＆＃13;

h1 {
  color: red;
}

div {
  background-color: yellow;
}

#div1 {
  font-family: helvetica;
}

#div2 {
  font-size: 36px;
}

.orangeback {
  background-color: orange;
}

.yellowback {
  background-color: yellow;
}

.blueback {
  background-color: blue;
}

.pinkback {
  background-color: pink;
}

canvas {
  width: 200px;
  height: 100px;
}

＆＃13;

<h1>Main Header</h1>
<canvas id="mycanvas" class="orangeback">
</canvas>
<input type="button" value="red" id="button2" onclick="doRed()">
<input type="button" value="blue" id="button3" onclick="doBlue()">

＆＃13;

Answer 2

你刚刚输错了。 myCanvas到mycanvas应该修复它。附上了片段中的变化。

function changeColor() {

  var id2 = document.getElementById("div2");

  id2.classList.add("pinkback");
}

function changeButton() {}

function doRed() {
  var canvas = document.getElementById("mycanvas");
  canvas.style.backgroundColor = "red";

  var context = canvas.getContext("2d");
  context.fillStyle = "purple";
  context.fillRect(10, 10, 60, 60);

  context.fillStyle = "black";
  context.font = "30px Arial";
  context.text = "Hello";
}

function doBlue() {
  var id1 = document.getElementById("mycanvas");
  id1.style.backgroundColor = "blue";
}

h1 {
  color: red;
}
div {
  background-color: yellow;
}
#div1 {
  font-family: helvetica;
}
#div2 {
  font-size: 36px;
}
.orangeback {
  background-color: orange;
}
.yellowback {
  background-color: yellow;
}
.blueback {
  background-color: blue;
}
.pinkback {
  background-color: pink;
}
canvas {
  width: 200px;
  height: 100px;
}

<h1>Main Header</h1>
<canvas id="mycanvas" class="orangeback">
</canvas>
<canvas id="div2" class="yellowback">
</canvas>
<input type="button" value="change" id="button1" onclick="changeColor()">
<input type="button" value="red" id="button2" onclick="doRed()">
<input type="button" value="blue" id="button3" onclick="doBlue()">
<input type="button" value="button" id="button4" onclick="changeButton()">

Canvas - Uncaught TypeError：无法读取null的属性'getContext'

2 个答案: