javascript - Canvas - 未捕获的类型错误 : Cannot read property 'getContext' of null

Question

<分区>

Answer 1

您的脚本有错别字 myCanvas 应该改为 mycanvas。 您还查询了几次 Canvas ，您可以在变量中使用 document.getElementById() 的结果来最小化 dom 查询。

示例如下:

// 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";
}

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>
<input type="button" value="red" id="button2" onclick="doRed()">
<input type="button" value="blue" id="button3" onclick="doBlue()">