Question

我有一个单击按钮执行此功能的按钮。此代码用于在canvas元素上绘制一条线，在该元素上使用PDF.JS在网页上呈现PDF文件。但我得到一个错误＆＃34; Uncaught TypeError：无法读取属性＆＃39; getContext＆＃39; of null＆＃34;。我该怎么办。

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

首先，你应该检查null：

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

其次，请确保您有一个元素canvas1 - 如果它存在，那么c不应该是null;如果它不存在，那么代码和内容之间就会出现差异，你需要决定在发生这种情况时应该发生什么，如果从不发生那么＆＃＆＃ 39; s例外，也许你想要引发错误，或者你自己指定的消息，或者其他什么。

Answer 2

检查脚本的位置。我已将其包含在<head>部分中，因此很明显，它试图在将canvas元素附加到DOM之前找到它。因此会出现undefined或null错误。

Answer 3

我正在使用var ctx= c.getContext('2D');首都＆＃39; D＆＃39;在2D中，这是不正确的。它应该是一个小写的＆＃39; d＆＃39;在2d。我意识到这是一个非常简单的错误，但它把我带到了这里。希望我没有其他人开始在如此简单的事情上拔头发。

Answer 4

您的代码尽我所知（只是添加了以下HTML）：

<button onclick="abc()">button</button>
<canvas id="canvas1" height="300" width="300"/>

http://jsfiddle.net/qBHRg/

Answer 5

检查错误的一些方法：

// if all else fails
try {
    var canvas = document.getElementById('canvas1');

    // if canvas element doesn't exist...
    if(!canvas)
        { console.log('Canvas not found.'); }
    else {
        // if the getContext method doesn't exist (old browser)
        if(!canvas.getContext)
            { console.log('Context not supported.'); }
        else {
            var context = canvas.getContext('2d');

            // if this particular context isn't supported
            if(!context)
                { console.log('Context 2D not available.'); }
            else {
                context.beginPath();
                context.moveTo(0,0);
                context.lineTo(300,150);
                context.stroke();
            }
        }
    }
}
catch(exc)
    { console.log(exc); }

Answer 6

假设您的警报报告您对画布和上下文有有效的引用：

警报＃1：HTMLCanvasElement和

警报＃2：CanvasRenderingContext2D（或您的浏览器版本）

然后，您提供的代码将在html5画布中工作（无错误）。

由于您使用的是pdf.js，因此您的错误可能是您未向我们展示过的代码。

确保您正在为pdf.js提供有效的上下文

此提醒应为CanvasRenderingContext2D

// test if the context you're feeding pdf.js is valid

alert(ctx);

// feed pdf.js the context

var myPDFContext = {
  canvasContext: ctx,
  viewport: viewport
};
page.render(myPDFContext);

无法读取null的属性'getContext'

6 个答案: