Am Montag erst angekündigt, folgt heute der erste kleine Code-Snippet zum Thema HTML5. Für mich als Videospielentwickler ist das neue Canvas-Element natürlich am interessantesten. Hier habe einfach die wichtigsten APIs ausprobiert und in kleinen Beispielen zusammengetragen. Darum rede ich jetzt auch gar nicht länger um den heißen Brei herum. Hier die Beispiele:
Rechteck
So soll es aussehen:
Screenshot Beispiel 1 - Rechteck
Und hier der Code:
1 2 3 4 5 6 7 8 9 | <canvas id="canvasRechteck" width="200" height="100"> Dein Browser unterstützt das Canvas-Element nicht. </canvas> <script type="text/javascript"> var canvas = document.getElementById("canvasRechteck"); var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.fillRect(10, 10, 150, 75); </script> |
Linien
So soll es aussehen:
Screenshot Beispiel 2 - Linien
Und hier der Code:
1 2 3 4 5 6 7 8 9 10 11 | <canvas id="canvasLinie" width="200" height="100"> Dein Browser unterstützt das Canvas-Element nicht. </canvas> <script type="text/javascript"> var canvas = document.getElementById("canvasLinie"); var context = canvas.getContext("2d"); context.moveTo(20, 30); context.lineTo(150, 60); context.lineTo(30, 70); context.stroke(); </script> |
Kreis
So soll es aussehen:
Screenshot Beispiel 3 - Kreis
Und hier der Code:
1 2 3 4 5 6 7 8 9 10 11 12 | <canvas id="canvasKreis" width="200" height="100"> Dein Browser unterstützt das Canvas-Element nicht. </canvas> <script type="text/javascript"> var canvas = document.getElementById("canvasKreis"); var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.beginPath(); context.arc(70, 50, 30, 0, Math.PI * 2, true); context.closePath(); context.fill(); </script> |
Verlauf
So soll es aussehen:
Screenshot Beispiel 4 - Verlauf
Und hier der Code:
1 2 3 4 5 6 7 8 9 10 11 12 | <canvas id="canvasVerlauf" width="200" height="100"> Dein Browser unterstützt das Canvas-Element nicht. </canvas> <script type="text/javascript"> var canvas = document.getElementById("canvasVerlauf"); var context = canvas.getContext("2d"); var gradient = context.createLinearGradient(0, 0, 175, 50); gradient.addColorStop(0, "#FF0000"); gradient.addColorStop(1, "#0000FF"); context.fillStyle = gradient; context.fillRect(30, 40, 150, 50); </script> |
Bild
So soll es aussehen:
Screenshot Beispiel 5 - Bild
Und hier der Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <canvas id="canvasBild" width="200" height="100"> Dein Browser unterstützt das Canvas-Element nicht. </canvas> <script type="text/javascript"> var canvas = document.getElementById("canvasBild"); var context = canvas.getContext("2d"); var image = new Image(); image.src = "img/pipo.png"; image.onload = function() { context.drawImage(image, 30, 30); }; </script> |
Kurz und knackig, falls mal jemand nachschlagen muss. 
Kommentare (0)