38

我已经尝试了几种不同的方法，但我一直遇到同样的错误。我之前已经将图像加载到画布上，但自从我几天前更新了 Safari 后，我遇到了错误。

我将发布我目前拥有的内容，但我尝试过使用 jQuery、html 的 onLoad 属性等。

var cvs, ctx, img;
function init() {
   cvs = document.getElementById("profilecanvas");
   ctx = cvs.getContext("2d"); /* Error in getContext("2d") */
   img = document.getElementById("profileImg");
   drawImg();
}

function drawImg() {
   ctx.drawImage(img, 0, 0);
}

window.onload = init();

ID 是正确的，并且对应于适当的 canvas 和 img 标签。但是，我一直在进步TypeError: 'null' is not an object (evaluating 'cvs.getContext')，而且似乎没有进一步发展。我确定这是一些 ID10T 错误，但我希望有人能给我一个线索，说明是什么原因造成的？谢谢你。

编辑：好的，所以这似乎<body onload="init()">现在可以使用。但是，它只是偶尔显示，如果我尝试跑掉init()或者$(document).ready()我document.onload仍然没有运气，则会收到错误消息。有什么想法吗？

4

7 回答 7

116

对于在搜索getContext返回 null 时点击此页面的其他人，如果您已经请求了不同类型的上下文，则可能会发生这种情况。

例如：

var canvas = ...;
var ctx2d = canvas.getContext('2d');
var ctx3d = canvas.getContext('webgl'); // will always be null

如果您颠倒调用顺序，同样如此。

于 2012-11-15T21:39:04.563 回答
34

当你这样做时：

window.onload = init();

该函数init()将立即执行（导致错误的原因，因为getContext()调用得太早，即在加载 DOM 之前），并且返回值init()将存储到window.onload.

所以你想真正做到这一点：

window.onload = init;

注意缺少的().

于 2011-07-22T21:28:35.233 回答
24

这与实际问题无关，但由于这个问题是谷歌搜索时的第一个结果，getContex("2d") null所以我正在添加我遇到的问题的解决方案：

确保您使用getContext("2d")而不是getContext("2D")- 注意小写的d。

于 2016-03-29T11:01:37.043 回答
8

只需将您的 JavaScript 放在页面末尾它就会...结束您的问题...我尝试了所有方法，但这是最合乎逻辑和最简单的解决方案..因为 JS 只会在另一部分之后运行（即上页）已加载..希望这有帮助

于 2014-04-15T17:13:56.217 回答
1

需要注意的是，上下文并不总是2d。我知道的所有可能的值：

'2d'
'webgl'
'webgl2'
'experimental-webgl'
'bitmaprenderer'

MDN getContext()：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters

从上面的 MDN 文档：

返回值

一个渲染上下文，要么是

如果 contextType 与可能的绘图上下文不匹配，或者与请求的第一个 contextType 不同，null则返回。

于 2021-07-24T04:03:42.323 回答
0

确保 javascript在canvas HTML 元素之后运行

这是不好的

<body>
    <script src="Canvas.js"></script>
    <canvas id="canvas"></canvas>
</body>

这很好

<body>
    <canvas id="canvas"></canvas>
    <script src="Canvas.js"></script>'
</body>

这基本上就是我解决问题的方式

于 2019-04-04T04:14:28.200 回答
0

我遇到了同样的问题，现在通过使用 var canvas=document.querySelector("canvas");而不是var canvas=document.getElementById("canvas");.

区别在于：

var canvas=document.querySelector("canvas"); 正在从标签名称中获取元素canvas。

var canvas=document.getElementById("canvas"); 正在从名为 的 id 获取元素canvas。

你可以试试这个。

于 2021-07-13T05:23:28.077 回答