38

私はこれをいくつかの異なる方法で試しましたが、同じエラーで立ち往生し続けます。以前にキャンバスに画像を読み込んだことがありますが、数日前に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).ready()、document.onload運が悪かったりすると、エラーが発生します。何かご意見は？

4

7 に答える 7

116

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

例えば：

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

呼び出しの順序を逆にした場合も同様です。

于 2012-11-15T21:39:04.563 に答える
34

これを行うとき：

window.onload = init();

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

したがって、実際にこれを実行する必要があります。

window.onload = init;

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

于 2011-07-22T21:28:35.233 に答える
24

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

getContext("2d")使用するのではなく、必ず使用してくださいgetContext("2D")-小文字のdに注意してください。

于 2016-03-29T11:01:37.043 に答える
8

ページの最後にJavaScriptを配置するだけで、問題が解決します...これを除いてすべてを試しましたが、これは最も論理的で単純な解決策です。JSは他の部分（つまり、上のページ）が読み込まれました..このヘルプを願っています

于 2014-04-15T17:13:56.217 に答える
1

コンテキストが常にであるとは限らないことに注意してください2d。私が知っているすべての可能な値：

'2d'
'webgl'
'webgl2'
'experimental-webgl'
'bitmaprenderer'

MDN getContext()：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters

上記のMDNドキュメントから：

戻り値

いずれかのレンダリングコンテキスト

contextTypeが可能な描画コンテキストと一致しない場合、または最初に要求されたcontextTypeと異なる場合は、nullが返されます。

于 2021-07-24T04:03:42.323 に答える
0

javascriptがcanvasHTML要素の後に実行されることを確認してください

これは悪いです

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

これはいい

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

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

于 2019-04-04T04:14:28.200 に答える
0

同じ問題に直面していましたが、 var canvas=document.querySelector("canvas");代わりにを使用することで解決しましたvar canvas=document.getElementById("canvas");。

違いは次のとおりです。

var canvas = document.querySelector（ "canvas"）; タグ名から要素を取得していますcanvas。

var canvas = document.getElementById（ "canvas"）; 。という名前のIDから要素を取得していcanvasます。

これを試すことができます。

于 2021-07-13T05:23:28.077 に答える