10

私はこのコードをJavaScriptで記述しており、index.htmlページに含めると完全に正常に機能します。

<canvas id="bannerCanvas" width="960" height="200">
    Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

   var canvas = document.getElementById("bannerCanvas");
   var context = canvas.getContext("2d");
     context.beginPath();
     context.moveTo(25,25);
     context.lineTo(355,55);
     context.lineTo(355,125);
     context.lineTo(25,125);
     context.moveTo(465,25);
     context.fill();
};  
</script>

...ただし、外部のJavaScriptファイルに配置すると、機能しません。インデックスページの先頭で、私はこれを宣言しました：

 <script type="text/javascript" src="JavaScript/functionality.js">
 </script>

そして、このfunctionality.jsファイルをJavaScriptディレクトリに保存し、このファイルで他のJS関数を実行して、インデックスページを確認し、JSが接続されていることを確認しました...答えはおそらく私を正面から見つめていますがどういうわけか見えない！

どんな助けでも大歓迎です、ありがとう。

編集：Firebugを使用していて、エラーは発生していません。インデックスページのコードを使用すると、外部JSファイルを使用すると、まだ必要な形状が表示されます。大きな黒い長方形が表示されます。

4

4 に答える 4

18

これは、canvas要素がレンダリングされる前にスクリプトが実行されているためです。

これを修正するには、これを外部ファイルに追加します。

document.addEventListener('DOMContentLoaded',domloaded,false);
function domloaded(){
    // your code here.
}

またはjqueryを使用

$(function(){
    // your code here.    
});
于 2012-07-05T17:47:30.950 に答える
4

内でfunctionality.js、コードをラップしてみてください

window.onload = function() {
// code here
}

ページが読み込まれるまで実行されないようにします。

于 2012-07-05T17:43:08.007 に答える
2

頭の中にある場合は、canvas要素がレンダリングされる前にロードしています。JavaScriptコンソールを見ると、Nullまたは未定義のエラーが表示されます。

インラインコードで機能するのと同じ場所にスクリプトタグを追加します。JavaScriptは頭の中にある必要はなく、一部の開発者はJavaScriptを常に本文の最後のものにすることを推奨します。

他の解決策は、ドキュメントレディまたはウィンドウオンロードでスクリプトを実行することです。

于 2012-07-05T17:41:26.253 に答える
2

頭に入れないでください。コードを頭に入れると、ページにまだキャンバス要素がないときにコードが実行されます。

于 2012-07-05T17:42:11.230 に答える