Javascript canvas getContext("2d") 返回 null
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6796194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
canvas getContext("2d") returns null
提问by stslavik
I've tried this a few different ways, but I keep getting stuck with the same error. I've loaded an image to canvas before, but since I updated Safari a few days ago, I'm getting errors.
我已经尝试了几种不同的方法，但我一直被同样的错误所困扰。我之前已经将图像加载到画布上，但是自从几天前我更新了 Safari，我遇到了错误。
I'll post what I have at the moment, but I've tried doing it with jQuery, html's onLoad property, etc.
我将发布我目前拥有的内容，但我尝试使用 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();
The IDs are correct and correspond to appropriate canvas and img tags. However, I keep getting TypeError: 'null' is not an object (evaluating 'cvs.getContext')and it doesn't seem to be getting any further. I'm sure it's some ID10T error, but I'm hoping someone can give me a clue as to what's causing this? Thank you.
ID 是正确的并且对应于适当的 canvas 和 img 标签。但是，我一直在进步TypeError: 'null' is not an object (evaluating 'cvs.getContext')，而且似乎没有进一步发展。我确定这是一些 ID10T 错误，但我希望有人能告诉我是什么导致了这个错误？谢谢你。
Edit:
Okay, so this seems to work using <body onload="init()">now. However, it only displays occasionally, and if I try to run init()off of $(document).ready()or document.onloadI still have no luck, and receive the error. Any thoughts?
编辑：好的，所以这似乎<body onload="init()">现在可以使用了。然而，它只是偶尔显示，如果我尝试运行init()的关闭$(document).ready()或document.onload我仍然没有运气，并收到错误。有什么想法吗？
回答by Drew Noakes
For others who hit this page while searching for getContextreturning null, it can happen if you have already requested a different type of context.
对于在搜索getContext返回 null时点击此页面的其他人，如果您已经请求了不同类型的上下文，则可能会发生这种情况。
For example:
例如：
var canvas = ...;
var ctx2d = canvas.getContext('2d');
var ctx3d = canvas.getContext('webgl'); // will always be null
The same is equally true if you reverse the order of calls.
如果您颠倒调用顺序，则同样如此。
回答by Floern
When you do this:
当你这样做时：
window.onload = init();
the function init()will be executed immediately (what causes the error, because getContext()gets called too early, i.e. before the DOM is loaded), and the return value of init()will be stored to window.onload.
该函数init()将立即执行（导致错误的原因，因为getContext()调用太早，即在加载 DOM 之前），并且 的返回值init()将存储到window.onload.
So you want to actually do this:
所以你想真正做到这一点：
window.onload = init;
Note the missing ().
注意缺少的().
回答by nEJC
This has nothing to do with actual question, but since this question is first result when googling getContex("2d") nullI'm adding the solution to problem I had:
这与实际问题无关，但由于这个问题是谷歌搜索时的第一个结果，因此getContex("2d") null我正在为我遇到的问题添加解决方案：
Make sure that you use getContext("2d")and not getContext("2D")- notice the lower-case d.
确保您使用getContext("2d")而不是getContext("2D")- 注意小写的d。
回答by Kunal0615
Just put your JavaScript at the end of the page it will ... put an end to your problems... i tried everything but this the most logical and simple solution.. as that JS will run only after the other part(ie the upper page) has loaded.. hope this help
只需将您的 JavaScript 放在页面的末尾，它就会......结束你的问题......我尝试了一切，但这是最合乎逻辑和最简单的解决方案......因为该 JS 只会在另一部分之后运行（即上页）已加载..希望这有助于
回答by Duba911
Make sure javascript runs afterthe canvas HTML element
确保 javascript在canvas HTML 元素之后运行
This is bad
这不好
<body>
<script src="Canvas.js"></script>
<canvas id="canvas"></canvas>
</body>
This is good
这很好
<body>
<canvas id="canvas"></canvas>
<script src="Canvas.js"></script>'
</body>
This is basically how I fixed my problem
这基本上就是我解决问题的方法
