Javascript canvas getContext（“2d”）返回null_Javascript_Html_Canvas_Html5 Canvas

Javascript canvas getContext（“2d”）返回null

javascript html canvas html5-canvas

Javascript canvas getContext（“2d”）返回null,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,我尝试过几种不同的方法，但我总是被相同的错误所困扰。我以前曾将图像加载到画布，但由于几天前更新了Safari，所以出现了错误我将发布我目前拥有的内容，但我已经尝试使用jQuery、html的onLoad属性等进行发布 var cvs, ctx, img; function init() { cvs = document.getElementById("profilecanvas"); ctx = cvs.getContext("2d"); /* Error in getContex

我尝试过几种不同的方法，但我总是被相同的错误所困扰。我以前曾将图像加载到画布，但由于几天前更新了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是正确的，并与相应的画布和img标记相对应。然而，我一直得到

TypeError:“null”不是一个对象（评估'cvs.getContext'）

，而且它似乎没有得到任何进一步的结果。我肯定这是ID10T的错误，但我希望有人能给我一个线索，到底是什么原因造成的？多谢各位

编辑：好的，现在使用

似乎可以了。但是，它只是偶尔显示，如果我尝试在

$（document）.ready（）

或

document.onload下运行init（）
，我仍然没有运气，并收到错误。有什么想法吗？
当您这样做时：
window.onload = init();

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

所以你想实际做到这一点：
window.onload = init;

请注意缺少的（）
对于在搜索返回null时点击此页面的其他人，如果您已经请求了其他类型的上下文，则可能会发生这种情况
例如：
var canvas = ...;
var ctx2d = canvas.getContext('2d');
var ctx3d = canvas.getContext('webgl'); // will always be null

如果您颠倒调用顺序，同样如此。
只需将JavaScript放在页面末尾，它将。。。结束你的问题。。。我什么都试过了，但这是最合乎逻辑、最简单的解决办法。。因为JS只会在其他部分（即上面的页面）加载后运行。。希望此帮助
这与实际问题无关，但由于此问题是在谷歌搜索getContex（“2d”）null时的第一个结果
我正在为我遇到的问题添加解决方案：
确保使用getContext（“2d”）
而不是getContext（“2d”）
——注意小写的d
确保javascript在画布HTML元素之后运行
这很糟糕
<body>
    <script src="Canvas.js"></script>
    <canvas id="canvas"></canvas>
</body>

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



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

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


'

这就是我解决问题的基本方法
天哪，你说得绝对正确。我真不敢相信我做了那件事。。。非常感谢。在Safari中，我和@stslavik有同样的问题。我似乎无法让它工作；即使没有init方法或其他方法，上下文为null也总是有问题。有什么想法吗/这是实现无错误JS的基本实践之一。而且很有效。。那么，有谁投过a-1票呢？请重新考虑一下你的立场，或者至少对它发表评论。。。如果u canI没有否决你，请纠正我，但我怀疑否决你的原因是，虽然你的问题是一个最佳实践（在某些情况下），但这个问题包含了一个特定的错误，该建议无法解决。换句话说，这可能是善意的建议，但与这个问题无关。这对我很有用。感谢您提醒我们良好的做法。成功了，但仍需要了解在哪些情况下它不起作用。那么，在我已经请求了不同类型的上下文之后，我可以做些什么来获得上下文？@TSR，我觉得这不可能，但我不是权威。这可能是有帮助的：如果你需要在画布中同时显示2D和3D，考虑堆叠两个画布元素，并使顶层有一个透明的背景。谢谢，所以许多其他线程没有这个答案。我使用的是JeeLiz Face Filters library，事实上它使用的是WebGL，当我在getContext（“2d”）中使用过滤器时，我一直在想，然后我得到了这个答案，谢谢兄弟