Question

我尝试了几种不同的方式，但我仍然遇到同样的错误。我之前已将图像加载到画布，但自从我几天前更新了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，我仍然没有运气，并收到错误。有什么想法吗？

Answer 1

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

例如：

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

如果你颠倒了通话顺序，情况也同样如此。

Answer 2

执行此操作时：

window.onload = init();

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

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

window.onload = init;

请注意缺少()。

Answer 3

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

确保您使用getContext("2d")而非getContext("2D") - 请注意小写 d 。

Answer 4

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

Answer 5

确保javascript在画布HTML元素之后运行

这很糟糕

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

这很好

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

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

Answer 6

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

区别在于：

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

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

你可以试试这个。

Answer 7

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

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

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

来自上面的 MDN 文档：

返回值

一个渲染上下文，要么是

CanvasRenderingContext2D 为 2d
WebGLRenderingContext 用于 webgl 和 experimental-webgl
WebGL2RenderingContext 为 webgl2
ImageBitmapRenderingContext 为 bitmaprenderer

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

canvas getContext（“2d”）返回null

7 个答案:

返回值