web-dev-qa-db-ja.com

canvas getContext（ "2d"）はnullを返します

私はこれをいくつかの異なる方法で試しましたが、同じエラーに悩まされ続けています。以前に画像をキャンバスにロードしたことがありますが、数日前に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' is not an object (evaluating 'cvs.getContext')を取得し続けており、それ以上取得していないようです。私はそれが何らかのID10Tエラーだと確信していますが、誰かが私にこれを引き起こしているものの手がかりを与えてくれることを望んでいますか？ありがとうございました。

編集：さて、これは<body onload="init()">を使用して動作するようです。ただし、たまにしか表示されず、init()または_document.onload_から$(document).ready()を実行しようとしても、まだ運がなく、エラーが発生します。何かご意見は？

javascripthtml5canvashtml5-canvas
27
stslavik

これを行うとき：

window.onload = init();

関数init()はすぐに実行され（getContext()の呼び出しが早すぎるため、つまりDOMがロードされる前にエラーが発生します）、init()の戻り値はwindow.onloadに保存されます。

だからあなたは実際にこれをやりたい：

window.onload = init;

欠落している()に注意してください。

31
Floern

getContext を返しているときにこのページをヒットした他の人は、すでに別のタイプのコンテキストを要求している場合に発生する可能性があります。

例えば：

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

呼び出しの順序を逆にしても同じことが言えます。

79
Drew Noakes

これは実際の質問とは関係ありませんが、この質問はgetContex("2d") nullをグーグルで検索したときの最初の結果なので、私が抱えていた問題の解決策を追加しています。

getContext("2d")ではなくgetContext("2D")を使用していることを確認してください-小文字のdに注意してください。

12
nEJC

JavaScriptをページの最後に置くだけで、問題を終わらせることができます...これは最も論理的でシンプルな解決策ですが、JSは他の部分（つまり、上のページ）がロードされました。このヘルプを願っています

7
Kunal0615

Javascriptが実行されることを確認してくださいafter the canvas HTML element

これは悪いです

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

これは良い

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

これは基本的に私が私の問題を修正した方法です

0
Duba911