senäh

17senäh und so…

HTML/CSS/JS
20. Jul 2011
Kommentare: 0

HTML5: Zeichnen auf dem Canvas

Kategorien: HTML/CSS/JS | 20. Jul 2011 | Kommentare: 0

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

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

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

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

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

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

Autor: Pipo

...kommt ursprünglich aus der Designerecke, ist aber im Laufe seines Studiums in die Webentwicklung gestolpert. Kann sich seit dem nicht so richtig entscheiden wo er hingehört und wagt deswegen vielleicht die Flucht nach vorne in ein komplett neues Gebiet. Vielleicht Management? Niemand weiß es. Auch er nicht.

Kommentare (0)

Für diesen Beitrag wurden Kommentare deaktiviert.