Warum kann ich in meinem HTML5-Zeichenbereich kein Rechteck zeichnen?

Ich versuche, ein rotes Rechteck in meinem HTML5 Canvas zu zeichnen. Hier ist mein HTML.Warum kann ich in meinem HTML5-Zeichenbereich kein Rechteck zeichnen?

<!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>

Hier ist plotting.js:

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

Hier ist main.css:

body { margin:100px; } 

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

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

Warum Seite leer ist? Chrome Web Developer Console gibt keine Fehler aus.

Quelle

2012-03-29 dangerChihuahua007

was sehen Sie, wenn Sie die dom inspizieren? Vielleicht möchten Sie auch onready ausprobieren ... – hvgotcodes

Ich habe es in Chrome ausgeführt, und ich sah einen Fehler in der Konsole. 'Uncaught TypeError: Eigenschaft 'fillStyle' von Objekt # ist keine Funktion'. http://jsfiddle.net/fhEjR/ –

Danke, aber mit 'ctx.fillStyle =" # f00 ";' noch nicht das Rechteck erscheinen. Auch nicht mit 'onready'. Wie überprüfe ich das DOM? – dangerChihuahua007

Verwenden window.onload statt document.onload, (@ stewe Vorschlag zu halten).

DEMO

Quelle

2012-03-29 18:01:34 paislee

Hey, das ist es! Vielen Dank. Das Rechteck erscheint mit 'window.onload = function() {...'. Ich bin jedoch verwirrt, warum das Fenster nach dem Dokument fertig ist. – dangerChihuahua007

Eigentlich hat diese Seite es für mich geklärt. http://stackoverflow.com/questions/588040/window-onload-vs-document-onload windows.onload wird ausgelöst, wenn die Seite für die Präsentation bereit ist, während document.onload ausgelöst wird, wenn das DOM bereit ist. – dangerChihuahua007

ersetzen:

ctx.fillStyle("#f00");

mit:

ctx.fillStyle="#f00";

Quelle

2012-03-29 17:58:01 stewe

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

Warum kann ich in meinem HTML5-Zeichenbereich kein Rechteck zeichnen?

Antwort

Verwandte Themen