0

HTML5 コードに単純な Canvas 要素があり、外部の JavaScript ファイルを使用して描画しようとしています。

<script src="script.js" type="text/javascript"></script>
<canvas id="can1" width="50px" height="50px"></canvas>

//script.js:
var can1 = document.getElementById("play");
var can1Context = play.getContext("2d");
can1Context.fillStyle="#FF0000";
can1Context.fillRect(0,0,150,75);

しかし、これは機能しませんが、スクリプトがキャンバス要素と同じファイルにある場合は機能します。誰かが私にそれを説明できますか？

4

1 に答える 1

1

に変更します

<canvas id="play" width="50px" height="50px"></canvas>
<!--        ^^^^ notice the different id -->
<script src="script.js" type="text/javascript"></script>

var can1 = document.getElementById("play");
var can1Context = can1.getContext("2d");
//                ^^^^ use the variable here, not the id!
can1Context.fillStyle="#FF0000";
can1Context.fillRect(0,0,150,75);

jQuery や DOM メソッドなどgetElementByIdで要素が見つからないのはなぜですか?を参照してください。説明のために。

于 2013-04-02T19:04:12.523 に答える