无法读取 null 的属性“getContext”

Question

我有一个按钮，单击执行此功能。此代码是在画布元素上绘制一条线，使用 PDF.JS 在网页上呈现 PDF 文件。 但是我收到一个错误“未捕获的类型错误：无法读取 null 的属性‘getContext’”。 我该怎么办。

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 ； 如果它不存在，那么代码和内容之间存在差异，您需要决定在发生这种情况时应该发生什么，如果它永远不会发生，那么它是异常的，也许您希望引发错误，或者你自己指定的消息，或者什么的。

Answer 2

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

Answer 3

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

Answer 4

据我所知，您的代码有效（刚刚添加了以下 HTML）：

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

http://jsfiddle.net/qBHRg/

Answer 5

如果最近偶然发现，请对其进行润色。

// Canvas class to contain info about element and canvas
// and convenient API for drawing
var Canvas = function (id) {
    this.element = document.getElementById('my-canvas');

    // if canvas element doesn't exist...
    if (!this.element) {
        throw new Exception('Canvas $id not found.'.replace('$id', id));
    }

    // if the getContext method doesn't exist (old browser)
    if (!this.element.getContext) {
        throw new Exception('Canvas $id cannot load contexts.'.replace('$id', id));
    }

    this.context2d = this.element.getContext('2d');

    // if this particular context isn't supported
    if (!this.context2d) {
        throw new Exception('Canvas $id cannot load 2D context.'.replace('$id', id));
    }
};

// draw a line through each of the given points
Canvas.prototype.drawLine = function (points) {
    for (var i = 0, l = points.length; i < l; i++) {
        var point = points[i];

        // if it's the first point, start a path
        // otherwise, continue from the previous point
        if (i === 0) {
            this.context2d.beginPath();
            this.context2d.moveTo(point[0], point[1]);
        } else {
            this.context2d.lineTo(point[0], point[1]);
        }
    }
    this.context2d.stroke();
};

// create a reference point for our Canvas instance
var myCanvas;

// initialize our Canvas instance on page load
function initCanvas() {
    try {
        myCanvas = new Canvas('my-canvas');

        // draw a diagonal line from the top left to the bottom right
        // use actual width and height, not CSS properties,
        // unless you want blurred content
        myCanvas.drawLine([
            [0, 0],
            [myCanvas.element.width, myCanvas.element.height]
        ]);
    }
    catch(exc) {
        window.alert(exc);
    }
}

document.addEventListener('DOMContentLoaded', initCanvas, false);

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 个解决方案

解决方案1
4 2014-03-19 13:39:09

解决方案2
2 2016-06-04 02:19:15

解决方案3
1 2017-09-17 01:02:48

解决方案4
0 2014-03-19 13:41:28

解决方案5
0 2014-03-19 13:44:03

解决方案6
0 2014-03-19 16:28:53

无法读取 null 的属性“getContext”

问题描述

6 个解决方案

解决方案1 4 2014-03-19 13:39:09

解决方案2 2 2016-06-04 02:19:15

解决方案3 1 2017-09-17 01:02:48

解决方案4 0 2014-03-19 13:41:28

解决方案5 0 2014-03-19 13:44:03

解决方案6 0 2014-03-19 16:28:53

解决方案1
4 2014-03-19 13:39:09

解决方案2
2 2016-06-04 02:19:15

解决方案3
1 2017-09-17 01:02:48

解决方案4
0 2014-03-19 13:41:28

解决方案5
0 2014-03-19 13:44:03

解决方案6
0 2014-03-19 16:28:53