html 5キャンバスが動作しない

私はhtml5を初心者にしています。キャンバスに問題があります。私はキャンバス2dを使って長方形を描こうとします。開発者ツールでは、キャンバスがnullであることが表示されます。html 5キャンバスが動作しない

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Canvas Testing</title> 
<script type="text/javascript"> 

    var c=document.getElementById("myCanvas"); 
    var cxt=c.getContext("2d"); 
    cxt.fillStyle="#FF0000"; 
    cxt.fillRect(0,0,150,75); 

</script> 

<style type="text/css"> 
    body{ 
     background:#ccc; 
     color:777; 
     font-size:14px; 
     font-family: verdana; 
    } 
    #myCanvas{ 
     margin:50px auto; 
     background:#eee; 
    } 
</style> 
</head> 
<body> 
    <canvas id="myCanvas" height="180" width="360"></canvas> 
</body> 
</html>

助けてください。事前にありがとうございます...

出典

2011-07-22 Tepken Vannkorn

window.onloadイベントで呼び出される関数内にJavaScriptを配置する必要があります。

window.onload = function() { 
    var c=document.getElementById("myCanvas"); 
    var cxt=c.getContext("2d"); 
    cxt.fillStyle="#FF0000"; 
    cxt.fillRect(0,0,150,75); 
}

出典

2011-07-22 17:57:41 goldierox

ページの下部にJavaScriptを配置しようとしましたが、同じように動作します。ありがとうございました... –

あなたが言うように、下部に配置すると、window.onloadも使用します。ただし、オンロードを設定すると、他のスクリプトによってオーバーロードされ、他のユーザーと予期しないエラーが発生する可能性がありますスクリプト。キャンバスを使用すると、bodyタグのonload関数が呼び出されます：その要素を含むボディ全体（この場合はキャンバス）が読み込まれると関数が呼び出されます宣言された。関数内で呼び出されないjavascriptコードは、スクリプトの前に宣言された要素のみで動作するため、キャンバスはnullです。 – Rickard

文書が初期化される前にJSが実行されています。

出典

2011-07-22 17:57:22 Hello71

html 5キャンバスが動作しない

答えて

関連する問題