无法读取 null 的属性“getContext”

Question

我有一个按钮，单击即可执行此功能。此代码是在画布元素上画一条线，在该线上使用 PDF.JS 在网页上呈现 PDF 文件。但我收到错误“Uncaught TypeError: Cannot read property 'getContext' of null”。我应该怎么办。

function abc()
{
alert("msg");
var c=document.getElementById("canvas1");
alert(c);
var ctx= c.getContext('2d');
alert(ctx);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
}

Answer 1

首先，您应该检查是否为空：

var c = document.getElementById("canvas1");
if (c != null) {
  // proceed
} else {
  // a problem: what can you do about it?
}

其次，确保你有一个元素canvas1- 如果它存在则不c应该存在null；如果它不存在，则代码和内容之间存在差异，您需要决定在发生这种情况时应该发生什么，如果它永远不应该发生，那么它是异常的，也许您希望引发错误，或者你自己指定的消息什么的。