HTML5 - Canvas - Tekenen met FillRect()

Auteur: UpLink - 30 mei 2012 - 17:42 - Gekeurd door: Ontani - Hits: 3910 - Aantal punten: (0 stemmen)

Beste SiMa's,

Ik had wat tijd teveel vandaag en heb me dus even verdiept in het <canvas>-element van HTML5.

Natuurlijk zijn er nog zoveel meer mogelijkheden, maar dit zowat een kleine basis van wat je ermee kan.

Na het bekijken van wat tutorials heb ik het volgende dus gemaakt.
Als je het scriptje wil uitproberen mag je even laten weten wat je ziet.

Browsertests:

- Chrome 19.0 -> Werkt
- IE 9.0 -> Werkt niet (nog geen HTML5 support?)
- FF -> niet gestest
- Opera -> niet getest

De niet geteste browsers zullen nog getest worden.

Natuurlijk zijn suggesties welkom en opbouwende kritiek evengoed.

mvg
UpLink

Code:

HTML gedeelte:

html code - Bekijk de code zonder highlighting - Klap code in

                <html>
<head>
<!-- JS-gedeelte hier -->
</head>
<body onLoad="tekenen();">
<canvas id="tekening" width="500" height="150"></canvas>
</body>
</html>

            
<html>
<head>
<!-- JS-gedeelte hier -->
</head>
<body onLoad="tekenen();">
<canvas id="tekening" width="500" height="150"></canvas>
</body>
</html>
 

JS gedeelte:

JavaScript code - Bekijk de code zonder highlighting - Klap code in

                <script type="application/x-javascript">
function tekenen() {
var canvas = document.getElementById("tekening");
if (canvas.getContext) {
var teken = canvas.getContext("2d");

teken.fillStyle = "rgb(40,0,0)";
teken.fillRect (20, 20, 65, 10);

teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (20, 20, 10, 30);

teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (20, 50, 65, 10);

teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (80, 50, 10, 40);

teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (20, 80, 65, 10);

teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (100, 20, 10, 70);

teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (120, 20, 80, 10);

teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (155, 20, 10, 70);

teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (210, 20, 10, 70);

teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (210, 20, 65, 10);

teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (210, 50, 40, 10);

teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (210, 80, 65, 10);

}
}
</script>
            
<script type="application/x-javascript">
function tekenen() {
var canvas = document.getElementById("tekening");
if (canvas.getContext) {
var teken = canvas.getContext("2d");
 
teken.fillStyle = "rgb(40,0,0)";
teken.fillRect (20, 20, 65, 10);
 
teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (20, 20, 10, 30);
 
teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (20, 50, 65, 10);
 
teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (80, 50, 10, 40);
 
teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (20, 80, 65, 10);
 
teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (100, 20, 10, 70);
 
teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (120, 20, 80, 10);
 
teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (155, 20, 10, 70);
 
teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (210, 20, 10, 70);
 
teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (210, 20, 65, 10);
 
teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (210, 50, 40, 10);
 
teken.fillStyle = "rgba(40,0,0)";
teken.fillRect (210, 80, 65, 10);
 
}
}
</script>
 

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Geen reacties (0)