login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > Overige > HTML > HTML5 - Canvas - Tekenen met FillRect()

HTML5 - Canvas - Tekenen met FillRect()

Auteur: UpLink - 30 mei 2012 - 17:42 - Gekeurd door: Ontani - Hits: 2694 - 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:

  1. <html>
  2. <head>
  3. <!-- JS-gedeelte hier -->
  4. </head>
  5. <body onLoad="tekenen();">
  6. <canvas id="tekening" width="500" height="150"></canvas>
  7. </body>
  8. </html>


JS gedeelte:

  1. <script type="application/x-javascript">
  2. function tekenen() {
  3. var canvas = document.getElementById("tekening");
  4. if (canvas.getContext) {
  5. var teken = canvas.getContext("2d");
  6.  
  7. teken.fillStyle = "rgb(40,0,0)";
  8. teken.fillRect (20, 20, 65, 10);
  9.  
  10. teken.fillStyle = "rgba(40,0,0)";
  11. teken.fillRect (20, 20, 10, 30);
  12.  
  13. teken.fillStyle = "rgba(40,0,0)";
  14. teken.fillRect (20, 50, 65, 10);
  15.  
  16. teken.fillStyle = "rgba(40,0,0)";
  17. teken.fillRect (80, 50, 10, 40);
  18.  
  19. teken.fillStyle = "rgba(40,0,0)";
  20. teken.fillRect (20, 80, 65, 10);
  21.  
  22. teken.fillStyle = "rgba(40,0,0)";
  23. teken.fillRect (100, 20, 10, 70);
  24.  
  25. teken.fillStyle = "rgba(40,0,0)";
  26. teken.fillRect (120, 20, 80, 10);
  27.  
  28. teken.fillStyle = "rgba(40,0,0)";
  29. teken.fillRect (155, 20, 10, 70);
  30.  
  31. teken.fillStyle = "rgba(40,0,0)";
  32. teken.fillRect (210, 20, 10, 70);
  33.  
  34. teken.fillStyle = "rgba(40,0,0)";
  35. teken.fillRect (210, 20, 65, 10);
  36.  
  37. teken.fillStyle = "rgba(40,0,0)";
  38. teken.fillRect (210, 50, 40, 10);
  39.  
  40. teken.fillStyle = "rgba(40,0,0)";
  41. teken.fillRect (210, 80, 65, 10);
  42.  
  43. }
  44. }
  45. </script>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Geen reacties (0)
© 2002-2018 Sitemasters.be - Regels - Gehost door: FireMultimedia - Laadtijd: 0.025s