1

キャンバスのコンテキストを取得したいときに問題に直面しています。HTMLコードは次のとおりです。

<canvas id="thecanvas" width="600" height="300"></canvas>

そしてJavascript：

var canvaso = document.getElementById('thecanvas');
if (!canvaso) {
    alert('Error: Cannot find the canvas element!');
    return;
}
if (!canvaso.getContext) {
    alert('Error: Canvas context does not exist!');
    return;
}

「canvaso」変数は正しくロードされていますが、「canvaso.getContext」で失敗しました:

Uncaught TypeError: Object #<HTMLDivElement> has no method 'getContext'

ご協力いただきありがとうございます。

4

3 に答える 3

3

これを試してください (デモを参照してください: http://jsbin.com/ijazum/1 ):

<body>
  <canvas id="canvas" width="600" height="300"></canvas>

  <script>
    function getStart() {
      var canvas = document.getElementById('canvas');

      if (!canvas) {
        alert('Error: Cannot find the canvas element!');
        return;
      }

      if (!canvas.getContext) {
        alert('Error: Canvas context does not exist!');
        return;
      }

      var ctx = canvas.getContext('2d');

      ctx.fillStyle = "#3d3";
      ctx.fillRect(0, 0, 100, 100);
    }

    getStart();
  </script>
</body>
于 2012-07-27T21:30:14.733 に答える
3

お使いのブラウザは HTML5 に準拠していません。準拠しているブラウザーが返されますObject #<HTMLCanvasElement> has no method 'getContext'(ただし、getContext メソッドは機能します)。

ここでは問題なく動作します。同じページに thecanvas の ID でキャンバスがあると確信していますか?

divここに可能性があります: ドキュメント内の任意の場所でid を使用して a を定義したことがthecanvasありますか? おそらくキャンバスの後にありますか? 重複する IDS は意味的に正しくなく、getElementById は DOM 内でその Id が最後に出現したものを返します。

于 2012-07-27T20:59:28.040 に答える
0

<head>これはおそらく、JavaScript をページのブロックに外部ファイルとしてロードしたためです。これは、要素などの残りの html 要素<canvas>が読み込まれる前に、JavaScript が実行されたことを意味します。これが、ブラウザが指定された ID を持つ要素をページ上で見つけることができなかった理由です。その時点では canvas 要素が存在しなかったためです。

これにはいくつかの解決策があります。

  1. <script>ブロックを宣言した後はいつでも、JavaScript コードをブロックに入力してください<canvas>。
  2. JavaScript コードを関数に挿入し、ボタンのクリックやページの読み込み (タグonload内の属性を使用) など、ページ上のアクティビティへの反応としてその関数を呼び出します。<body>

2 番目のソリューションのサンプルを以下に示します。

index.html:

<!DOCTYPE html>
<html>
<head>
  <script src="myscript.js"> </script>
</head>
<body onload="test()">
  <canvas id="thecanvas" width="600" height="300"></canvas>
</body>
</html>

myscript.js:

function test() {
  var canvaso = document.getElementById('thecanvas');
  if (!canvaso) {
      alert('Error: Cannot find the canvas element!');
      return;
  }
  else if (!canvaso.getContext) {
      alert('Error: Canvas context does not exist!');
      return;
  }
  else {
      alert('Success!');
  }
}
于 2016-12-19T21:01:08.320 に答える