senäh

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:

Und hier der Code:

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

Und hier der Code:

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

Und hier der Code:

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

Und hier der Code:

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

Und hier der Code:

        <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. 🙂