blocks|key|1685633|text|执行此操作时：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1685634|window.onload+=+init();|code-block|syntax|javascript|1685635|函数init()将被立即执行(这是导致错误的原因，因为getContext()被调用得太早，即在加载DOM之前)，并且init()的返回值将被存储到window.onload。|offset|length|style|CODE|1685636|所以你想要这样做：|1685637|window.onload+=+init;|1685638|请注意缺少的()。|1685639|entityMap^0|0|0|2|6|R|C|1N|6|22|D|0|0|0|6|2|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]|$I|Z|J|10|K|L]|$I|11|J|12|K|L]|$I|13|J|14|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|17|8|@$I|18|J|19|K|L]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$]]

When you do this:

<pre><code>window.onload = init();
</code></pre>

the function <code>init()</code> will be executed immediately (what causes the error, because <code>getContext()</code> gets called too early, i.e. before the DOM is loaded), and the return value of <code>init()</code> will be stored to <code>window.onload</code>.

So you want to actually do this:

<pre><code>window.onload = init;
</code></pre>

Note the missing <code>()</code>.

blocks|key|1685676|text|对于在搜索返回null的getContext时访问此页面的其他人，如果您已经请求了不同类型的上下文，则可能会发生这种情况。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1685677|例如：|1685678|var+canvas+=+...;
var+ctx2d+=+canvas.getContext('2d');
var+ctx3d+=+canvas.getContext('webgl');+//+will+always+be+null|code-block|syntax|javascript|1685679|如果你颠倒了调用的顺序，同样也是如此。|1685680|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.w3.org/html5/spec/the-canvas-element.html#dom-canvas-getcontext^0|C|A|C|A|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

For others who hit this page while searching for <a href="http://dev.w3.org/html5/spec/the-canvas-element.html#dom-canvas-getcontext"><code>getContext</code></a> returning null, it can happen if you have already requested a different type of context.

For example:

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

The same is equally true if you reverse the order of calls.

blocks|key|75421|text|只需将您的JavaScript放在页面的末尾，它将...结束你的问题。我试过所有的方法，但这是最合理和最简单的解决方案..因为JS只有在其他部分(即上面的页面)加载之后才会运行。希望这对你有所帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|75422|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|75460|text|这与实际问题无关，但由于这个问题是谷歌搜索getContex("2d")+null时的第一个结果，所以我将解决方案添加到我的问题中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|75461|确保使用getContext("2d")而不是getContext("2D")+-注意小写的d。|BOLD|75462|entityMap^0|L|K|0|4|G|N|G|1A|1|0^^$0|@$1|2|3|4|5|6|7|K|8|@$9|L|A|M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|H]]|D|@]|E|$]]|$1|I|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|J|$]]

This has nothing to do with actual question, but since this question is first result when googling <code>getContex("2d") null</code> I'm adding the solution to problem I had:

Make sure that you use <code>getContext("2d")</code> and not <code>getContext("2D")</code> - notice the lower-case d.

blocks|key|1685792|text|确保javascript在对canvas+HTML元素执行之后运行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1685793|这是坏的|offset|length|style|BOLD|1685794|<body>
++++<script+src="Canvas.js"></script>
++++<canvas+id="canvas"></canvas>
</body>|code-block|syntax|javascript|1685795|这是很好的|1685796|<body>
++++<canvas+id="canvas"></canvas>
++++<script+src="Canvas.js"></script>'
</body>|1685797|这基本上就是我解决问题的方法|1685798|entityMap^0|0|0|4|0|0|0|5|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

Make sure javascript runs after the canvas HTML element 

This is bad

<pre><code>&lt;body&gt;
 &lt;script src="Canvas.js"&gt;&lt;/script&gt;
 &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
&lt;/body&gt;
</code></pre>

This is good

<pre><code>&lt;body&gt;
 &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
 &lt;script src="Canvas.js"&gt;&lt;/script&gt;'
&lt;/body&gt;
</code></pre>

This is basically how I fixed my problem

blocks|key|75472|text|我也面临着同样的问题，现在通过使用var+canvas=document.querySelector("canvas");代替var+canvas=document.getElementById("canvas");解决了这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|75473|区别在于：|75474|var+canvas=document.querySelector("canvas")；正在从标记名canvas获取元素。|75475|var+canvas=document.getElementById("canvas")；正在从名为canvas的id中获取元素。|75476|你可以试试这个。|75477|entityMap^0|H|18|1R|19|0|0|1E|6|0|1E|6|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|11|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|O|$]]

I was facing the same problem and now it is resolved by using
<code>var canvas=document.querySelector(&quot;canvas&quot;);</code> instead of <code>var canvas=document.getElementById(&quot;canvas&quot;);</code>.
The difference is:
var canvas=document.querySelector(&quot;canvas&quot;); is getting the element from tag name <code>canvas</code>.
var canvas=document.getElementById(&quot;canvas&quot;); is getting the element from the id named <code>canvas</code>.
You can try this out.

blocks|key|3300488|text|应该注意的是，上下文并不总是2d。我所知道的所有可能的值：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3300489|'2d'
'webgl'
'webgl2'
'experimental-webgl'
'bitmaprenderer'|code-block|syntax|javascript|3300490|MDN+getContext()：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters|3300491|从上面的MDN文档中：|3300492|返回值|3300493|一个呈现上下文，它可以是|3300494|适用于2d|3300495|WebGLRenderingContext的|unordered-list-item|3300496|CanvasRenderingContext2D和适用于bitmaprenderer|3300497|的experimental-webgl|3300498|
|3300499|WebGL2RenderingContext和webgl|3300500|3300501|如果contextType与可能的绘图上下文不匹配，或者与请求的第一个contextType不同，则返回null。|3300502|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters|1|https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext|2|https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D|3|https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext^0|E|2|0|0|4|C|H|2G|0|0|0|0|0|3|2|0|0|L|1|0|S|E|0|O|2|0|1|I|0|0|N|5|0|M|3|0|0|1G|4|0^^$0|@$1|2|3|4|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1P|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|M|3|N|5|6|7|1W|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1X|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1Z|8|@$9|20|A|21|B|C]]|D|@]|E|$]]|$1|U|3|V|5|W|7|22|8|@]|D|@$9|23|A|24|1|25]]|E|$]]|$1|X|3|Y|5|W|7|26|8|@$9|27|A|28|B|C]]|D|@$9|29|A|2A|1|2B]]|E|$]]|$1|Z|3|10|5|6|7|2C|8|@$9|2D|A|2E|B|C]]|D|@]|E|$]]|$1|11|3|12|5|6|7|2F|8|@]|D|@]|E|$]]|$1|13|3|14|5|W|7|2G|8|@$9|2H|A|2I|B|C]]|D|@$9|2J|A|2K|1|2L]]|E|$]]|$1|15|3|-4|5|6|7|2M|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|2N|8|@$9|2O|A|2P|B|C]]|D|@]|E|$]]|$1|18|3|-4|5|6|7|2Q|8|@]|D|@]|E|$]]]|19|$1A|$5|1B|1C|1D|E|$1E|1F]]|1G|$5|1B|1C|1D|E|$1E|1H]]|1I|$5|1B|1C|1D|E|$1E|1J]]|1K|$5|1B|1C|1D|E|$1E|1L]]]]

It should be noted that the context is not always <code>2d</code>. All possible values that I'm aware of:
<pre class="lang-js prettyprint-override"><code>'2d'
'webgl'
'webgl2'
'experimental-webgl'
'bitmaprenderer'
</code></pre>
MDN <code>getContext()</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters</a>
From the MDN doc above:
<h3 id="return-value-elfc">Return value</h3>
A rendering context which is either
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D" rel="nofollow noreferrer">CanvasRenderingContext2D</a> for <code>2d</code></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext" rel="nofollow noreferrer">WebGLRenderingContext</a> for <code>webgl</code> and <code>experimental-webgl</code></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext" rel="nofollow noreferrer">WebGL2RenderingContext</a> for <code>webgl2</code></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapRenderingContext" rel="nofollow noreferrer">ImageBitmapRenderingContext</a> for <code>bitmaprenderer</code></li>
</ul>
If the contextType doesn't match a possible drawing context, or differs from the first contextType requested, <code>null</code> is returned.

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.

I'll post what I have at the moment, but I've tried doing it with jQuery, html's onLoad property, etc.

<pre><code>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();
</code></pre>

The IDs are correct and correspond to appropriate canvas and img tags. However, I keep getting <code>TypeError: 'null' is not an object (evaluating 'cvs.getContext')</code> 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.

Edit:
Okay, so this seems to work using <code>&lt;body onload="init()"&gt;</code> now. However, it only displays occasionally, and if I try to run <code>init()</code> off of <code>$(document).ready()</code> or <code>document.onload</code> I still have no luck, and receive the error. Any thoughts?

canvas getContext("2d") returns null

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经尝试了几种不同的方法，但我总是遇到相同的错误。我之前已经加载了一个图像到canvas，但是自从我在几天前更新了Safari之后，我收到了错误。我会发布我目前所拥有的内容，但我已经尝试过使用jQuery、html的onLoad属性等。var cvs, ctx, img;function init() {   cvs...

问canvas getContext("2d")返回null
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问canvas getContext("2d")返回nullEN