Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197
Einführung in Canvas | Ajaxschmiede.de


Mai 18

Einführung in Canvas

Tag: CanvasPatrick @ 5:06 pm

Da ich in letzter Zeit über einige Projekte geschrieben habe, die auf Canvas beruhen, möchte ich über dessen Möglichkeiten und Funktionen in Form eines kleinen Tutorials berichten. In meinen Ausführungen orientiere ich mich an der Umsetzung im Mozilla Firefox und benutze als Grundlage die englischsprachige Dokumentation von Mozilla

Was ist Canvas, wer unterstützt es und woher kommt es?

Canvas ist ein grafisches Element, das mit HTML5 eingeführt werden wird. Mit Canvas ist es möglich Grafiken, Graphen und einfache Animationen mit Hilfe von Skript-Sprachen (vorrangig Javascript) dynamisch zu erzeugen. (Das Thema Animationen lasse ich in diesem Artikel außen vor.) Der aktuelle Spezifikationvorschlag ist auf der Seite http://www.whatwg.org einzusehen.

Das Canvas-Element wurde ursprünglich von Apple im OS X Dashboard zum skriptbasierten Erstellen von Minianwendungen (sogenannten Widgets) ins Leben gerufen und wurde somit vom hauseigenen Browser Safari unterstützt. Der Support seitens Mozilla begann mit der Gecko-Engine in Version 1.8, die im Firefox 1.5 verwendet wurde. Opera kommt ab Versionsnummer 9 mit Canvas zu recht.

Einzig der Internet Explorer (in allen Varianten) bietet keine Unterstützung des Elementes. Bisher ist dies auch nicht geplant, wie ich bereits in meinem Beitrag über die IE8-Beta erwähnte. Abhilfe schafft das ExplorerCanvas-Skript, das dem Internet Explorer die fehlende Unterstützung nachliefert.

Einbau in den Quellcode

Wie jedes andere HTML-Element wird das Canvas-Element im Quellcode eingebettet. Hierbei ist zu beachten, dass man die Ausmaße der anzuzeigenden Grafik über width und height angibt.

<canvas id="canvas1" width="400" height="100"></canvas>

Der eigentliche Canvas-Code ist in Javascript geschrieben und befindet sich im entsprechenden HTML-Tag. Es empfiehlt sich den Canvas-Code in eine Funktion zu packen, die dann nach dem Laden der Seite aufgerufen wird. Dies erreicht man durch den onload-Befehl, den man entweder direkt in HTML auf das body-Element anwendet oder per Javascript über Event-Methoden anhängt.

in HTML:

<body onload="draw();">

in Javascript:

if ( window.addEventListener ) {
addEventListener( "load", draw, false );
} else {
attachEvent( "onload", draw );
}

Im Javascript-Bereich wird die von mir draw genannte Funktion definiert.

Canvas-Methoden

Ich habe eine Demonstrationsseite erstellt, in der alle hier vorgestellten Methoden angewandt werden. Hinweis: Scheinbar nicht alle Beispiele sind im IE mit ExplorerCanvas nachvollziehbar.

Eine draw-Funktion sieht beispielsweise wie folgt aus:

function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
canvas = canvas.getContext('2d');
canvas.fillStyle = "rgb(200,0,0)";
canvas.fillRect( 10, 10, 55, 55 );
}
}

Die Abfrage nach der Funktion getContext dient dazu, festzustellen ob der Browser Canvas unterstützt und es somit zu keinen JS-Fehlern bei fehlendem Support kommt. Als erstes weist man einer Variable den Pfad zum Canvas-Element zu, in das die Grafik hineingezeichnet werden soll, und wendet dann darauf die Methode getContext(‚2d‘) an, mit der das Zeichnen eingeleitet wird.

Rechtecke und Gestaltungsmöglichkeiten

Wie man dem oberen Beispiel entnehmen kann, werden einfarbige, gefüllte Rechtecke mit der Funktion fillRect gezeichnet.

Parameter: fillRect( x-Koordinate, y-Koordinate, Breite, Höhe )

Mittels fillStyle kann man die Farbe des darzustellenden Rechtecks festlegen. Erlaubt sind die gewohnten Angaben mit Farbnamen, im rgb(a)-Format und Hexadezimalsystem.

Es ist ebenso möglich ein Rechteck nur mit Umrissen zu zeichnen. Dies wird über die Funktionen strokeRect und strokeStyle realisiert, die genauso benutzt werden können, wie die Methoden für ausgefüllte Rechtecke.

Linien und freie Formen

Das Erstellen von Linien geschieht mit der Methode lineTo, die als Parameter den Endpunkt der zu zeichnenden Gerade enthält.

Parameter: lineTo( x-Koordinate, y-Koordinate )

Um den Startpunkt der Geraden zu verlegen, nutzt man die Funktion moveTo, die ebenfalls einen x- und y-Wert als Parameter erwartet. Durch moveTo kann man sich frei im (virtuellen) „Raum“ bewegen.

Parameter: moveTo( x-Koordinate, y-Koordinate )

Um zusammengesetzte Linien zu zeichnen verwendet man die Path-Funktion, die mit beginPath eingeleitet wird. Die danach folgenden Anweisungen wie lineTo geben die Eckpunkte des Pfades an.

Mit den anschließend notierten Methoden fill oder stroke entscheidet man, ob die neu geschaffene Form ausgefüllt oder nur umrandet dargestellt werden soll. Es existiert auch eine closePath-Method zum Festlegen des Pfadendes, die bei Verwendung von fill getrost weggelassen werden kann. Hierbei werden der erste und der letzte Punkt automatisch miteinander verbunden und es ergibt sich somit eine selbstdefinierte „Form“.

Hier ein Codeschnipsel zur Verdeutlichung:

canvas.fillStyle = "rgba(0,150,0,0.7)";
canvas.beginPath();
canvas.moveTo( 50, 75 );
canvas.lineTo( 100, 125 );
canvas.lineTo( 100, 25 );
canvas.fill();

Kreise, Bögen und Kurven

Doch Canvas ist nicht nur auf Geraden und rechteckige Figuren beschränkt. Mit dem Befehl arc zeichnet man Kreise – wie bei den Rechtecken entweder umrahmt oder ausgefüllt.

Parameter: arc( x-Koordinate Kreismittelpunkt, y-Koordinate Kreismittelpunkt, Radius, Startwinkel, Endwinkel, Uhrzeigersinn [ true / false ] );

Bei Kreisen gibt es zwei Dinge zu beachten. Zum einen sind der Start- und Endwinkel in der Einheit Bogenmaß anzugeben, also nicht im Gradmaß. Der 360°-Vollwinkel ist dementsprechend 2*Math.PI. Zum anderen muss man festlegen, ob man die Winkelangaben mit oder entgegen dem Uhrzeigersinn betrachtet.

Ein gefüllter Vollkreis wird beispielsweise mit folgendem Code erzeugt:

canvas.fillStyle = "rgb(0,100,0)";
canvas.beginPath();
canvas.arc( 200, 75, 30, 0, 2*Math.PI, true);
canvas.fill();

Das Darstellen von komplexeren Kurven geschieht mit den beiden Methoden bezierCurveTo und quadraticCurveTo.

Parameter: quadraticCurveTo( x-Koordinate Kontrollpunkt, y-Koordinate Kontrollpunkt, x-Koordinate Endpunkt, x-Koordinate Endpunkt )

Parameter: bezierCurveTo(x-Koordinate Kontrollpunkt 1, y-Koordinate Kontrollpunkt 1, x-Koordinate Kontrollpunkt 2, y-Koordinate Kontrollpunkt 2, x-Koordinate Endpunkt, x-Koordinate Endpunkt )

Während bei der quadratischen Bezierkurve nur ein Kontrollpunkt zur Verlaufsbestimmung benutzt wird, werden bei der bezierCurveTo-Funktion 2 Kontrollpunkte benutzt. Jedoch ist das freie Zeichnen von Bezierkurven, also ohne visuellen Vorschau, äußert zeitaufwendig und eine Herausforderung.

Hier ein Beispiel dazu:

canvas.fillStyle = "rgb(245,0,0)";
canvas.beginPath();
canvas.moveTo( 75, 40 );
canvas.bezierCurveTo( 75, 37, 70, 25, 50, 25 );
canvas.bezierCurveTo( 20, 25, 20, 62.5, 20, 62.5 );
canvas.bezierCurveTo( 20, 80, 40, 102, 75, 120 );
canvas.bezierCurveTo( 110, 102, 130, 80, 130, 62.5 );
canvas.bezierCurveTo( 130, 62.5, 130, 25, 100, 25 );
canvas.bezierCurveTo( 85, 25, 75, 37, 75, 40 );
canvas.fill();

canvas.beginPath();
canvas.moveTo( 200, 25 );
canvas.quadraticCurveTo( 150, 25, 150, 62.5 );
canvas.quadraticCurveTo( 150, 100, 175, 100 );
canvas.quadraticCurveTo( 175, 120, 155, 125 );
canvas.quadraticCurveTo( 185, 120, 190, 100 );
canvas.quadraticCurveTo( 250, 100, 250, 62.5 );
canvas.quadraticCurveTo( 250, 25, 200, 25 );
canvas.stroke();

Weitere gestalterische Möglichkeiten

Desweiteren bietet Canvas grundlegende Funktionen zum Manipulieren der Linien und Linienübergänge.

Die Linienstärke wird über lineWidth festgelegt. Mit lineCap bestimmt man das Aussehen der Linienenden. Dazu stehen die folgenden Varianten zur Auswahl: butt (stumpf), round (abgerundet) und square (Überhang). Sowohl das Überhang als auch der Halbkreis haben eine Höhe respektive einen Radius entsprechend dem halben Wert der Linienbreite. butt entspricht dem Standardwert.

canvas.lineWidth = 15;
canvas.lineCap = "round";
canvas.beginPath();
canvas.moveTo( 110, 20 );
canvas.lineTo( 110, 130 );
canvas.stroke();

Mit lineJoin bestimmt man das Aussehen der Ecken zweier verbundener Linien. Hierbei stehen die Attribute round (abgerundet), bevel (abgeschrägt) und miter (eckig) zur Verfügung. Der default-Wert ist round.

canvas.lineJoin = "bevel";
canvas.beginPath();
canvas.moveTo( 200, 60 );
canvas.lineTo( 225, 85 );
canvas.lineTo( 250, 60 );
canvas.lineTo( 275, 85 );
canvas.lineTo( 300, 60 );
canvas.stroke();

Farbverläufe

Canvas ermöglicht Formen sowohl mit linearen als auch mit radialen Farbverläufen auszufüllen. Dazu wird einer Variable ein Verlauf zugewiesen. Die dazugehörigen Methodenaufrufe lauten createLinearGradient und createRadialGradient. Jeweils wird ein Startpunkt beziehungsweise -kreis und ein Endpunkt beziehungsweise -kreis als Parameter angeben, die den Bereich angeben, in dem der Farbverlauf sich erstreckt.

Parameter: createLinearGradient( x-Koordinate Startpunkt, y-Koordinate Startpunkt, x-Koordinate Endpunkt, y-Koordinate Endpunkt )

Parameter: createRadialGradient( x-Koordinate Mittelpunkt Startkreis, y-Koordinate Mittelpunkt Startkreis, Radius Startkreis, x-Koordinate Mittelpunkt Endkreis, y-Koordinate Endpunkt Startkreis, Radius Endkreis )

Anschließend werden die einzelnen farblichen Zwischenstufen mittels addColorStop definiert. Der Funktion fillStyle wird im Anschluß die Variable, die den Verlaufbeinhaltet, zugewiesen.

Parameter: addColorStop( Position [Werte zwischen 0-1 sind erlaubt], Farbdefinition );

Hier ein Beispiel eines Farbverlaufsskriptes:

var lingrad = canvas.createLinearGradient( 0, 0, 0, 150 );
lingrad.addColorStop( 0, "#0099cc" );
lingrad.addColorStop( 0.5, "#fff" );
lingrad.addColorStop( 0.5, "#99cc00");
lingrad.addColorStop( 1, "#0099ff");

canvas.fillStyle = lingrad;
canvas.fillRect( 10, 10, 130 ,130 );

Muster

Neben den bisher genannten Füllmöglichkeiten gibt es noch eine weitere Art die Fläche einer Form auszufüllen. Die Rede ist von Mustern, die aus gewöhnlich Bilddateien generiert werden. Dazu erstellt man zuerst ein neues Image-Objekt, weist diesem den Pfad zur zu verwendenden Grafikquelle zu und definiert eine onload-Funktion, die nach erfolgreichem Laden des Bildes mittels createPattern ein neues Muster erstellt.

Parameter: createPattern( Image-Objekt, Art der Wiederholungen )

Neben der Wiederholungsart „repeat“ gibt es – ähnlich der CSS-Eigenschaft background-repeat – weitere Varianten um beispielsweise Wiederholungen nur in x- oder y-Richtung zu erzeugen. Jedoch sind diese noch nicht implementiert.

Der folgende Javascript-Code soll das Vorgehen aufzeigen:

var img = new Image();
img.src="wallpaper.png";
img.onload = function() {
var pattern = canvas.createPattern( img, "repeat" );
canvas.fillStyle = pattern;
canvas.fillRect( 0, 0, 400, 150 );
}

Ausblick

Mozilla wird mit der Version 3.0 des Firefox-Browser, der auf der Gecko-Enging 1.9 basiert, in Sachen Gestaltungsmöglichkeiten von Canvas einen Schritt weiter gehen und das Rendern von Text erlauben. Dazu werden die folgenden mozilla-spezifischen Methoden eingeführt:

  • mozDrawText() – zeichnet Text
  • mozMeasureText() – gibt die Breite des zuzeichnenden Textes zurück
  • mozPathText() – definiert einen Textpfad
  • mozTextAlongPath() – zeichnet Text entlang eines vorher definierten Pfades

Zur Demonstrationsseite

18 Antworten zu “Einführung in Canvas”

  1. reverse cell phone lookup free name sagt:

    cell phone lookup free lookup a cell phone number by name for free reverse phone lookup cell
    free name cell phone reverse number lookup

    My webpage: reverse cell phone lookup free name

  2. free reverse cell phone number lookup sagt:

    reverse phone number lookup cell reverse phone lookup
    cell phone cell phone lookup by number for name can you
    reverse lookup a cell phone number

    Feel free to surf to my site :: free reverse cell phone number lookup

  3. Best Work Boots sagt:

    As we reported last week, the recently releasedlistrevealed a 45% increase in citations over the exactsame list in 2012. And that is definitely work reviewing! Ourblog post on 2/27/14 coveredviolations 1-5and you can find those at Now let’s check out violations 6-10.
    Best Work Boots http://www.safetyshoesbuy.com/

  4. lookup cell phone number owner free sagt:

    reverse number cell phone lookup cell phone number lookup by number how do i
    lookup a cell phone number cell phone lookup by number

    Have a look at my blog post :: lookup cell phone number owner free

  5. cell number lookup free name on phone sagt:

    cell phone lookup with name cell phone lookup numbers free reverse cell
    phone lookup with name cell phone directory free lookup

    Feel free to visit my homepage … cell number lookup free name on phone

  6. reverse cell phone provider lookup sagt:

    free reverse cell phone number lookup lookup cell phone number owner free
    lookup cell phone number phone lookup by number cell phone free

    my web site; reverse cell phone provider lookup

  7. wcczzqhrx sagt:

    Einführung in Canvas | Ajaxschmiede.de
    awcczzqhrx
    wcczzqhrx http://www.gg53m54k7vc91b09b0ept68t0r2kj80qs.org/
    [url=http://www.gg53m54k7vc91b09b0ept68t0r2kj80qs.org/]uwcczzqhrx[/url]

  8. how to lookup a cell phone number sagt:

    cell phone lookup name reverse phone number lookup cell cell phone lookup by number for name free number lookup cell phone

    Take a look at my website; how to lookup a cell phone number

  9. how to lookup a cell phone number sagt:

    cell reverse phone lookup reverse cell phone lookup by number reverse phone number lookup cell phone
    reverse phone cell phone lookup

    my webpage; how to lookup a cell phone number

  10. how to lookup cell phone numbers sagt:

    free cell phone lookup by name cell phone address
    lookup free cell phone lookup cell phone no lookup

    Look into my homepage – how to lookup cell phone numbers

  11. how to lookup a cell phone number for free sagt:

    cell phone directory reverse lookup name lookup cell phone number
    cell reverse phone lookup cell number lookup free
    name on phone

    Also visit my website: how to lookup a cell phone number for free

  12. cell phone directory free lookup sagt:

    how to lookup a cell phone number how do you lookup a cell phone
    number how to lookup cell phone numbers number lookup
    cell phone name

    Here is my site – cell phone directory free lookup

  13. cell phone reverse lookup free sagt:

    phone lookup cell cell phone lookup by number for name how to reverse lookup a cell
    phone reverse cell phone provider lookup

    Also visit my homepage cell phone reverse lookup free

  14. reverse cell phone lookup usa sagt:

    free complete reverse cell phone lookup cell phone phone number
    lookup reverse phone lookup cell reverse free cell phone lookup

    Also visit my blog: reverse cell phone lookup usa

  15. 台湾0机械关税进口代理 sagt:

    2、 我们通过深入走访调研,钢铁行业从去年9月份以来 特别是产能严重过剩行业的生产增势明显放缓。经济发展快但能源又短缺。 目前已覆盖300多个城市,并使能量的时空转移、能量流的有序流动成为可能,蔬菜、畜禽产品和水产品监测合格率分别为97.17个百分点;铁路、船舶、航空航天和其他运输设备制造业产成品占用资金为430.新科技革命和产业变革加快孕育、融合发展,以工业污染源烟气连续监测龙头企业雪迪龙为例。

  16. number lookup cell phone name sagt:

    lookup a cell phone number by name for free cell phone
    lookup free by name free reverse lookup cell phone numbers with name lookup a cell phone

    Also visit my web page … number lookup cell phone name

  17. cell phone lookup by name free sagt:

    reverse lookup free cell phone cell phone lookup numbers cell phone
    reverse number lookup cell phone lookup with name

    Here is my blog post cell phone lookup by name free

  18. free reverse number lookup cell phone sagt:

    cell phone reverse phone number lookup cell phone lookup by address reverse
    number cell phone lookup free reverse cell phone lookup

    Review my web page … free reverse number lookup cell phone

  19. cell phone lookup directory sagt:

    cell phone lookup by number free for name cell phone lookup by name
    for free reverse lookup free cell phone
    free number lookup cell phone with name

    my web blog cell phone lookup directory

  20. 蒸锅进口报关代理 sagt:

    3、 在主要国家中,其它地方怎样“治堵“?欧洲在工业机器人和医疗机器人领域居于领先地位,具备高精度测量辐射无线电骚扰(EMI)和辐射敏感度(EMS)的试验能力。5元。解说:68776人 引发城市灾难。 如涉及作品内容、版权和其它问题, 采编:aimee 文章来源:新华食品 免责声明:本栏目发布文章目的在于传递更多信息。

  21. free complete reverse cell phone lookup sagt:

    cell phone lookup with name cell phone phone number lookup how to lookup a cell phone
    number for free cell phone lookup by address

    Check out my blog post … free complete reverse cell phone lookup

  22. reverse phone lookup cell free name sagt:

    free cell phone number lookup by number lookup cell phone number owner free cell phone lookup free cell phone reverse lookup name

    my blog post; reverse phone lookup cell free name

  23. lookup a cell phone number free sagt:

    reverse cell phone lookup free name cell phone reverse phone number lookup how
    to lookup a cell phone number for free reverse number lookup
    cell phone free

    Feel free to visit my homepage – lookup a cell phone number free

  24. cell phone number reverse lookup free name sagt:

    reverse call lookup cell phone reverse cell phone lookup by name cell phone number owner
    lookup free cell phone number lookup by number

    Here is my weblog: cell phone number reverse lookup free name

  25. free cell phone number lookup sagt:

    reverse cell phone number lookup free with name free
    cell phone directory reverse lookup cell phone reverse number lookup
    free free number lookup cell phone with name

    My weblog; free cell phone number lookup

  26. free address lookup by cell phone number sagt:

    free number lookup cell phone with name lookup cell phone number
    owner free number lookup free cell phone cell phone lookup for free

    my web page – free address lookup by cell phone number

  27. how do you lookup a cell phone number sagt:

    cell phone reverse number lookup free cell phone info lookup how to lookup a
    cell phone number free reverse cell phone lookup by number

    Visit my web page :: how do you lookup a cell phone number

  28. gayhusbands.net sagt:

    Generally I do not learn post on blogs, but I wish to say that this write-up very
    pressured me to check out and ddo it! Your writing style has been amazed me.

    Thanks, quite nice article.

  29. Over At This Website sagt:

    This design is incredible! You obviously know how to keep a reader amused.

    Between your wit and your videos, I was almost moved
    to start my own blog (well, almost…HaHa!) Excellent job.
    I really loved what you had to say, and more than that,
    how you presented it. Too cool!

Hinterlasse einen Kommentar