HTML5キャンバスに四角形を描けないのはなぜですか？

HTML5のキャンバスに赤い四角形を描画しようとしています。ここに私のHTMLがあります。ここでHTML5キャンバスに四角形を描けないのはなぜですか？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset=utf-8> 
    <title>My Canvas Experiment</title> 
    <link rel="stylesheet" type="text/css" href="main.css" /> 
    <script src="plotting.js"></script> 
    <!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> 
     </script> 
    <![endif]--> 
    </head> 
    <body> 
    <canvas id="plot"></canvas> 
    </body> 
</html>

はplotting.jsです：

ここ

document.onload = function() { 
    var c = document.getElementById("plot"); 
    var ctx = c.getContext("2d"); 
    ctx.fillStyle("#f00"); 
    ctx.fillRect(0, 0, 175, 40); 
}

があるmain.cssです：

body { margin:100px; } 

article, aside, figure, footer, header, hgroup, menu, nav, section { 
    display:block; 
} 

#plot { 
    width: 500px; 
    height: 400px; 
}

なぜページが空白のですか？ Chromeウェブデベロッパーコンソールでエラーは発生しません。

出典

2012-03-29 dangerChihuahua007

あなたはDOMを検査するとき、あなたが何を見ていますか？あなたもonreadyを試してみたいかもしれません... – hvgotcodes

私はChromeで実行し、コンソールでエラーが発生しました。 'Uncaught TypeError：オブジェクト＃のプロパティ 'fillStyle'は関数ではありません。 http://jsfiddle.net/fhEjR/ –

ありがとうございますが、 'ctx.fillStyle ="＃f00 ";'を使用しても矩形が表示されません。 'onready'も使用しません。 DOMの検査方法を教えてください。 – dangerChihuahua007

利用window.onload代わりのdocument.onload、（@のsteweの提案を維持します）。

DEMO

出典

2012-03-29 18:01:34 paislee

ねえ、それをやった！ありがとうございました。矩形は 'window.onload = function（）{...'で表示されます。しかし、私はなぜドキュメントの後にウィンドウが用意されているのか混乱しています。 – dangerChihuahua007

実際、このページは私のためにそれをクリアしました。 http://stackoverflow.com/questions/588040/window-onload-vs-document-onload windows.onloadは、ページのプレゼンテーションの準備ができたときに起動し、document.onloadはDOMの準備ができたら起動します。 – dangerChihuahua007

は交換してください：

ctx.fillStyle("#f00");

で：

ctx.fillStyle="#f00";

出典

2012-03-29 17:58:01 stewe

????? ?????????? – Thariama

HTML5キャンバスに四角形を描けないのはなぜですか？

答えて

関連する問題