画布 getContext("2d") 返回 null答案

【问题标题】：canvas getContext("2d") returns null画布 getContext("2d") 返回 null
【发布时间】：2011-10-11 09:23:17
【问题描述】：

我已经尝试了几种不同的方法，但我一直遇到同样的错误。我之前已经将图像加载到画布上，但自从我几天前更新了 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()">。但是，它只是偶尔显示，如果我尝试从$(document).ready() 或document.onload 运行init()，我仍然没有运气，并收到错误。有什么想法吗？

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

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

例如：

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

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

【讨论】：

那么在我已经请求了不同类型的上下文之后，我该怎么做才能获取上下文？
@TSR，我觉得这是不可能的，但我不是权威。这可能会有所帮助：html.spec.whatwg.org/multipage/…
如果您需要在画布中同时显示 2D 和 3D，请考虑堆叠两个画布元素，并让最上面的元素具有透明背景。
谢谢，很多其他线程没有这个答案。我正在使用 JeeLiz 人脸过滤器库，它实际上是在使用 WebGL，而我正在使用带有 getContext("2d") 的过滤器

【解决方案2】：

当你这样做时：

window.onload = init();

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

所以你想实际这样做：

window.onload = init;

注意缺少的()。

【讨论】：

天哪，你说得对。我真的不敢相信我做到了...非常感谢。
我在 Safari 中也遇到了与 @stslavik 相同的问题。我似乎无法让它工作；即使没有 init 方法或不同的方法，也总是会遇到上下文为空的问题。有什么想法吗？ ://

【解决方案3】：

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

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

【讨论】：

我想知道并一直想知道然后我得到了这个答案，谢谢兄弟

【解决方案4】：

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

【讨论】：

这是实现无错误 JS 的基本实践之一。并且它有效..所以曾经投票过-1的人请重新考虑你的立场或至少对此发表评论......如果你可以纠正我
我没有对您投反对票，但我怀疑投反对票的原因是，虽然您的问题是最佳实践（在某些情况下），但问题包含此建议无法解决的特定错误。换句话说，这可能是很好的建议，但与这个问题无关。
这对我有用。感谢您提醒良好做法。
工作，但仍需要了解它在什么情况下不起作用。

【解决方案5】：

需要注意的是，上下文并不总是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。

【讨论】：

【解决方案6】：

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

这很糟糕

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

这很好

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

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

【讨论】：

【解决方案7】：

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

区别在于：

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

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

你可以试试这个。

【讨论】：