Kommentar: Heute habe ich die Leinwand von HTML5 gelernt und festgestellt, dass die Koordinaten und die Größe von Fillrect falsch waren. Nachdem ich lange studiert hatte, stellte ich fest, dass die Breite und Höhe der Leinwand in das Leinwand -Tag eingefügt werden muss.
FILLRECT (100.100.100.100) Die ersten 2 100er beziehen sich auf Koordinaten, und die letzten 2 100er beziehen sich auf Breite und Höhe.Heute habe ich die Leinwand von HTML5 gelernt und festgestellt, dass die Koordinaten und die Größe von Fillrect falsch waren. Nachdem ich lange studiert hatte, stellte ich fest, dass die Breite und Höhe der Leinwand in das Leinwand -Tag eingefügt werden muss. Lange deprimiert.
Fehlermethode 1:
<! docType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> document </title>
<Styles>
#mycanvas {
Breite: 200px;
Höhe: 200px;
Hintergrund: Gelb;
}
</style>
</head>
<body>
<Canvas>/canvas>
<Script>
var c = document.getElementById ('mycanvas');
var ctx = C.GetContext ("2D");
ctx.fillStyle = '#f36';
CTX.FillRect (100, 100, 100, 100);
</script>
</body>
</html>
Falscher Weg 2:
<! docType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> document </title>
</head>
<body>
<Canvas> </canvas>
<Script>
var c = document.getElementById ('mycanvas');
var ctx = C.GetContext ("2D");
ctx.fillStyle = '#f36';
CTX.FillRect (100, 100, 100, 100);
</script>
</body>
</html>
Ergebnisse zeigen:
Der richtige Weg:
<! docType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> document </title>
</head>
<body>
<Canvas> </canvas>
<Script>
var c = document.getElementById ('mycanvas');
var ctx = C.GetContext ("2D");
ctx.fillStyle = '#f36';
CTX.FillRect (100, 100, 100, 100);
</script>
</body>
</html>