Canvas Dokumentation
freigegeben - Jan Kus/Volker Schaefer
<canvas> (deutsch "Leinwand") ist ein HTML-Element, das ursprünglich ein Bestandteil von Apple's Webkit war und durch die WHATWG in die HTML5 Spezifikation übernommen wurde. Im Zusammenspiel mit Javascript ermöglicht es das Rendern von Bildinhalten zur Laufzeit.
<canvas> verwendet die Funktionalität der, durch die Khronos Group definierten, Open Graphics Library for Embedded Systems 2.0. Microsoft trat vor langer Zeit aus der Arbeitsgruppe aus und entwickelte seinen eigenen Standard DirectX. Dies könnte einer der vielen Gründe sein, warum erst der Internet Explorer 9 das Element richtig unterstützt.
Minimal wird eine HTML5 Seite mit einem <canvas> im <body> benötigt. Mit der Javascript-Funktion "getElementById" kann das <canvas> angesprochen werden.
Das Stylesheet wird hier benötigt um das <canvas> in der Darstellung hervor zu heben. Mit "document.getElementById('canvas')" wird eine Referenz auf das <canvas> in die Variable "can" hinterlegt.
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<style type="text/css" rel="stylesheet">
body { background: #00000; }
canvas { background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
</script>
</html>###Rendering Context getContext(type)
Mit der Funktion "getContext" erlangt man Zugriff auf das typspezifische Framework und dessen vordefinierten Funktionen. Es ist möglich sowohl 2D als auch 3D Inhalte gleichzeitig in ein und dem selben <canvas> auszugeben.
Mit "can.getContext('2d')" wird eine Referenz auf das 2D Framework des <canvas> in der Variable "ctx" hinterlegt.
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<style type="text/css" rel="stylesheet">
body { background: #00000; }
canvas { background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
</script>
</html>Die im Stylesheet definierten "width" (deutsch: "Breite") und "height" (deutsch: "Höhe") geben die Größe des Darstellungsbereiches vom <canvas> innerhalb der Webseite an. Wo hingegen die Attribute "width" und "height" des <canvas> die Anzahl der Pixel (Auflösung) im Darstellungsbereich definieren.
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<style type="text/css" rel="stylesheet">
body { background: #00000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="640px" height="480px">< /canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
</script>
</html>Merke: Jeder Webbrowser hat andere Standartwerte für Auflösung bzw. Größe.
Merke: Wir Empfehlen immer die Auflösung und Größe anzugeben, damit ungewollte Nebeneffekten ausgeschlossen werden.
Wichtig: Stimmen die Größe und die Auflösung des Darstellungsbereiches nicht überein kommt es zu einer Skalierung.
Im allgemeinen dient die Funktion "drawImage" dazu Images (deutsch: "Bilder") im <canvas> zur Laufzeit zu rendern.
Merke: Koordinaten orientieren sich immer an der linken oberen Ecke.Merke: Es können Images sowie ein <canvas> als Quelle angegeben werden, in jedem Fall bleibt die Funktionalität gleich.
Wichtig: Beim Parameter "canvas" handelt es sich um das <canvas> und nicht um den Context.
Rendert ein Image im Context an die Koordinate "dx," / "dy".
drawImage(image/canvas, dx, dy)
Parameter:
- image / canvas = Quellelement
- dx = x - Koordinate im Context
- dy = y - Koordinate im Context
Mit "new Image()" wird per Javascript ein neues Image erzeugt und in die Variable "img" abgelegt. Durch "img.src" wird die Quelle des Image's definiert und geladen. Weil ein Image erst zur Darstellung gebracht werden kann, wenn es vollständig geladen ist, wird das Event "onload" benötigt.
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.src = 'images/300.png';
img.onload = function() {
ctx.drawImage(this, 20, 20);
}
</script>
</html>
Rendert ein Image im Context an die Koordinate "dx" / "dy" mit der Breite "dw" und der Höhe "dh". Bei einer Abweichung der Werte "dw" und "dh" von der Auflösung des Quellbildes, wird dieses entsprechend skaliert.
drawImage(image/canvas, dx, dy, dw, dh)
Parameter:
- image / canvas = Quellelement
- dx = x - Koordinate im Context
- dy = y - Koordinate im Context
- dw = Breite im Context
- dh = Höhe im Context
Mit "new Image()" wird per Javascript ein neues Image erzeugt und in die Variable "img" abgelegt. Durch "img.src" wird die Quelle des Image's definiert und geladen. Weil ein Image erst zur Darstellung gebracht werden kann, wenn es vollständig geladen ist, wird das Event "onload" benötigt. Da sich die hier angegebene Höhe und Breite von den Auflösungswerten des Image's unterscheiden kommt es zur Skalierung.
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.src = 'images/300.png';
img.onload = function() {
ctx.drawImage(this, 20, 20, 96, 144);
}
</script>
</html>
Merke: Wenn Höhe und Breite sich von den Bildwerten unterscheiden, kommt es zur Skalierung.
Rendert den Ausschnitt eines Image's, definiert durch die Koordinate "sx" / "sy" mit der Breite "sw" und der Höhe "sh", im Context an die Koordinate "dx" / "dy" mit der Breite "dw" und der Höhe "dh". Bei einer Abweichung der Werte "sw" zu "dw" und "sh" zu "dh" wird der Ausschnitt entsprechend skaliert.
drawImage(image/canvas, sx, sy, sw, sh, dx, dy, dw, dh)
Parameter:
- image / canvas = Quellelement
- sx = x - Koordinate im Quellelement
- sy = y - Koordinate im Quellelement
- sw = Breite des Ausschnitts
- sh = Höhe des Ausschnitts
- dx = x - Koordinate im Context
- dy = y - Koordinate im Context
- dw = Breite im Context
- dh = Höhe im Context
Mit "new Image()" wird per Javascript ein neues Image erzeugt und in die Variable "img" abgelegt. Durch "img.src" wird die Quelle des Image's definiert und geladen. Weil ein Image erst zur Darstellung gebracht werden kann, wenn es vollständig geladen ist, wird das Event "onload" benötigt. Die ersten vier Parameter nach "this" definieren den Ausschnitt, der dargestellt werden soll. Anschließend geben die letzten vier Parameter die Position und Größe im Context an.
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.src = 'images/300.png';
img.onload = function() {
ctx.drawImage(this, 0, 0, 64, 96, 20, 20, 64, 96);
}
</script>
</html>
Merke: Wenn die Höhen- und Breitenparameter sich unterscheiden kommt es zur Skalierung.
Eröffnet einen neuen Path (deutsch: "Pfad").
Merke: Es musst der letzte Path immer geschlossen werden, um einen neuen zu beginnen.closePath()
Schließt den aktuellen Path.
Positioniert den Anfangspunkt des Path'es an die Koordinate "x" / "y" innerhalb des Contexts.
Parameter:
- x = x - Koordinate im Context
- y = y - Koordinate im Context
lineTo(x, y)
Bezieht sich auf den vorerherigen Ausgangspunkt und definiert eine Linie bis zur Koordinate "x" / "y" innerhalb des Contexts.
Parameter:
- x = x - Koordinate im Context
- y = y - Koordinate im Context
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(220, 20);
ctx.lineTo(220, 220);
ctx.lineTo(20, 220);
ctx.closePath();
ctx.strokeStyle = "#000000";
ctx.stroke();
</script>
</html>
quadraticCurveTo(cx, cy, x, y)
Die Funktion "quadraticCurveTo" bezieht sich auf den vorherigen Ausgangspunkt. Mittels Kontrollpunkt wird eine gleichmäßige Kurve vom Ausgangspunkt zum Endpunkt berechnet. Der Kontrollpunkt gibt die Richtung, in der gezeichnet wird, vor.
Parameter:
- cx = x - Koordinate vom Kontrollpunkt im Context
- cy = y - Koordinate vom Kontrollpunkt im Context
- x = x - Koordinate vom Endpunkt im Context
- y = y - Koordinate vom Endpunkt im Context
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.beginPath();
ctx.moveTo(80, 40);
ctx.quadraticCurveTo(160, 200, 240, 40);
ctx.moveTo(80, 40);
ctx.closePath();
ctx.strokeStyle = "#000000";
ctx.stroke();
</script>
</html>
bezierCurveTo(cx1, cy1, cx2, cy2, x, y)
Die Funktion "bezierCurveTo" bezeiht sich auf den vorherigen Ausgangspunkt. Mittels zweier Kontrollpunkte wird eine Kurve vom Ausgangspunkt zum Endpunkt berechnet. Die Kontrollpunkte geben die Richtung, in der die Linie verläuft, vor.
Parameter:
- cx1 = x - Koordinate vom ersten Kontrollpunkt im Context
- cy1 = y - Koordinate vom ersten Kontrollpunkt im Context
- cx2 = x - Koordinate vom zweiten Kontrollpunkt im Context
- cy2 = y - Koordinate vom zweiten Kontrollpunkt im Context
- x = x - Koordinate vom Endpunkt im Context
- y = y - Koordinate vom Endpunkt im Context
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.beginPath();
ctx.moveTo(80, 120);
ctx.bezierCurveTo(120, 240, 200, 0, 240, 120);
ctx.moveTo(80, 120);
ctx.closePath();
ctx.strokeStyle = "#000000";
ctx.stroke();
</script>
</html>
Definiert ein Viereck beginnend an der Koordinate "x" / "y" mit der Breite "w" und der Höhe "h".
Parameter:
- x = x - Koordinate im Context
- y = y - Koordinate im Context
- w = Breite des Vierecks
- h = Höhe des Vierecks
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.beginPath();
ctx.rect(20, 20, 200, 200);
ctx.closePath();
ctx.strokeStyle = "#000000";
ctx.stroke();
</script>
</html>
arc(x, y, r, startAngle, endAngle, anticlockwise)
Definiert einen Kreis mit dem Radius "r", dessen Zentrum sich an der Koordinate "x" / "y" befindet. Die Parameter "startAngle" und "endAngle" geben den zu zeichnenden Ausschnitt als Winkel in Bogenmaß an. Wo hingegen "anticlockwise" die Richtung, in der gezeichnet wird, bestimmt.
Parameter:
- x = x - Koordinate im Context
- y = y - Koordinate im Context
- r = Radius des Kreises
- startAngle = Anfangswinkel in Bogenmaß
- endAngle = Abschlusswinkel in Bogenmaß
- anticlockwise = Richtung in der gezeichnet wird, default: false (Uhrzeigersinn)
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.beginPath();
ctx.arc(160, 120, 60, 0, Math.PI * 2, false);
ctx.closePath();
ctx.strokeStyle = "#000000";
ctx.stroke();
</script>
</html>
Ist eine Attribut des Context und legt den Befüllungsstil für die Pathes fest.
Merke: So lange der Füllstil nicht geändert wird, werden alle Pathes entsprechend der aktuellen Einstellung befüllt.fill()
Befüllt den Path anhand des aktuellen Befüllungsstils.
strokeStyle
Ist ein Attribut des Context und legt den Linienstil für die Pathes fest.
Merke: So lange der Linienstil nicht geändert wird, werden alle Pathes entsprechend der aktuellen Einstellung gezeichnet.stroke()
Zeichnet den Path anhand des aktuellen Linienstils.
Mit "ctx.fillStyle" und "ctx.strokeStyle" werden der Befüllungsstil und der Linienstil des <canvas> definiert. Die Aufrufe von "ctx.fill" und "ctx.stroke" wenden die Stile auf den zu letzt angelegten Path an.
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.beginPath();
ctx.rect(20, 20, 200, 200);
ctx.closePath();
ctx.fillStyle = "#E6E6E6";
ctx.fill();
ctx.strokeStyle = "#000000";
ctx.stroke();
</script>
</html>
###createLinearGradient createLinearGradient(x1, y1, x2, y2)
Erzeugt einen linearen Farbverlauf zwischen zwei Punkten innerhalb des Contexts. Der Farbverlauf wird als Stilvorlage (siehe fillStyle bzw strokeStyle) für Pathes verwendet.
Parameter:
- x1 = x - Koordinate vom ersten Punkt im Context
- y1 = y - Koordinate vom ersten Punkt im Context
- x2 = x - Koordinate vom zweiten Punkt im Context
- y2 = y - Koordinate vom zweiten Punkt im Context
Mit "ctx.createLinearGradient" wird ein linearer Farbverlauf erzeugt und in die Variable "grd" gespeichert. Der hier dargestellte Farbverlauf verläuft von oben links nach unten rechts.
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.beginPath();
ctx.rect(20, 20, 200, 200);
ctx.closePath();
var grd = ctx.createLinearGradient(20, 20, 220, 220);
grd.addColorStop(0, '#0FF000');
grd.addColorStop(1, '#000FF0');
ctx.fillStyle = grd;
ctx.fill();
</script>
</html>
createRadialGradient(x1, y1, r1, x2, y2, r2)
Erzeugt einen radialen Farbverlauf zwischen dem inneren und äußeren Kreis innerhalb des Contexts. Bei einem Versatz der Koordinaten vom innnern zum äußeren Kreis kommt es zur Fischaugenbildung. Der Farbverlauf wird als Stilvorlage (siehe fillStyle bzw strokeStyle) für Pathes verwendet.
Parameter:
- x1 = x - Koordinate vom inneren Kreis im Context
- y1 = y - Koordinate vom inneren Kreis im Context
- r1 = Radius innerer Kreis
- x2 = x - Koordinate vom äußeren Kreis im Context
- y2 = y - Koordinate vom äußeren Kreis im Context
- r2 = Radius äußerer Kreis
Beim ersten Verlaufsbeispiel stimmen die Koordinaten des inneren und äußeren Kreises überein. Es handelt sich hierbei um einen gleichmäßigen Farbverlauf, da der innere Radius "0" und der äußere gleich dem Radius vom Path ist.
Beim zweiten Verlaufsbeispiel stimmen die Koordinaten des inneren und äußeren Kreises weiterhin überein. Da der innere Radius vergrößert ist, beginnt der Verlauf erst an der Kannte des inneren Kreises und nicht wie zuvor aus dem Zentrum.
Beim dritten Verlaufsbeispiel sind die Koordinaten des inneren zum äußeren Kreis versetzt, es kommt zur sogenannten Fischaugenbildung.
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.beginPath();
ctx.arc(80, 120, 60, 0, Math.PI * 2, false);
ctx.closePath();
var a = ctx.createRadialGradient(80, 120, 0, 80, 120, 60);
a.addColorStop(0, '#0FF000');
a.addColorStop(1, '#000FF0');
ctx.fillStyle = a;
ctx.fill();
ctx.beginPath();
ctx.arc(160, 120, 60, 0, Math.PI * 2, false);
ctx.closePath();
var b = ctx.createRadialGradient(160, 120, 30, 160, 120, 60);
b.addColorStop(0, '#0FF000');
b.addColorStop(1, '#000FF0');
ctx.fillStyle = b;
ctx.fill();
ctx.beginPath();
ctx.arc(240, 120, 60, 0, Math.PI * 2, false);
ctx.closePath();
var c = ctx.createRadialGradient(270, 120, 30, 240, 120, 60);
c.addColorStop(0, '#0FF000');
c.addColorStop(1, '#000FF0');
ctx.fillStyle = c;
ctx.fill();
</script>
</html>
###addColorStop addColorStop(offset, color)
Die Funktion "addColorStop" wird vom Farbverlauf zur Verfügung gestellt und erzeugt einen Verlaufspunkt. Der Parameter "offset" ist eine beliebige Kommazahl von 0 bis 1 und gibt die prozentuelle Entfernung vom Verlaufbeginn an. Der Parameter "color" definiert den Farbwert am entsprechenden Verlaufpunkt. Farbwerte sind vom Typ "String" und werden entweder im Format "HEX" oder "RGBA" angegeben.
Parameter:
- offset = Position vom Verlaufspunkt
- color = Farbwert vom Verlaufspunkt
Durch "ctx.createRadialGradient" wird ein radialer Farbverlauf erzeugt und in die Variable "grd" gespeichert. Mit "a.addColorStop" fügt man dem Farbverlauf einen Verlaufpunkt hinzu. In diesem Beispiel wird der erste Verlaufspunkt durch einen "HEX" und der zweite durch einen "RGBA" Farbwert angegeben. Das Viereck im Hintergrund dient zur Verdeutlichung der Alphatransparents vom "RGBA" Farbwert.
<!DOCTYPE html>
<html>
<head>
<title>Canvas – Dokumentation</title>
<style type="text/css" rel="stylesheet">
body { background: #000000; }
canvas { width: 320px; height: 240px; background: #FFFFFF; }
</style>
</head>
<body>
<canvas id="canvas" width="320px" height="240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.beginPath();
ctx.rect(10, 10, 150, 220);
ctx.closePath();
ctx.fillStyle = '#000000';
ctx.fill();
ctx.beginPath();
ctx.arc(160, 120, 60, 0, Math.PI * 2, false);
ctx.closePath();
var grd = ctx.createRadialGradient(160, 120, 0, 160, 120, 60);
grd.addColorStop(0, '#0FF000');
grd.addColorStop(1, 'rgba(0,128,128,0.5)');
ctx.fillStyle = grd;
ctx.fill();
</script>
</html>
##Aufgaben 1.1 Kreuzen Sie die Vorraussetzungen an, damit Sie mit <canvas> arbeiten können.
- Webbrowser mit <canvas> Unterstützung
- Webkit Plugin
- aktiviertes Javascript
- HTML Dokument mit <canvas> im <body>
- CSS3 Unterstüzung
1.2 Was passiert mit dem Inhalt eines <canvas> bei einer Abweichung der Attributswerte Höhe und Breite von den Stylesheetwerten ?
- die Inhalte werden nur teilweise dargestellt
- es kommt zu einer Skalierung aller Inhalte
- der Inhalt kann nicht dargestellt werden
1.3 Was können Sie alles mit den "drawImage" Funktionen machen ?
- Images rotieren
- Images skalieren
- Images positionieren
- Imageparts selektieren
- Images perspektivisch verzerren
2.1 Ergänzen Sie nachfolgenden Code um ein Viereck zu erzeugen.
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.________________();
ctx.________________(20,20);
ctx.________________(20,220);
ctx.________________(220,220);
ctx.________________(220,20);
ctx.________________();
ctx.strokeStyle = '#000000';
ctx.stroke();
</script>2.2 Ergänzen Sie nachfolgenden Code um ein schwarz befülltes Viereck mit drei Befehlen zu erzeugen.
<script type="text/javascript">
var can = document.________________('canvas');
var ctx = can.________________('2d');
ctx.________________;
ctx.________________;
ctx.________________;
ctx.________________ = '#000000';
ctx.________________;
</script>2.3 Ergänzen Sie nachfolgenden Code um ein Bild an der Koordinate (20/20) mit einer Breite und Höhe von 200px auszugeben.
<script type="text/javascript">
var can = document.________________('canvas');
var ctx = can.________________('2d');
var img = ________________;
img.________________ = "images/testbild.png";
img.________________ = function() {
ctx.________________;
}
</script>3.1 Kann der Funktion "drawImage" der Context eines <canvas> übergeben werden, begründe ?
3.2 Welcher Unterschied besteht zwischen den <canvas> Attribut- zu Stylesheetwerten für Höhe und Breite ?
3.3 Greifen Sie auf das <canvas> zu und erzeugen Sie einen kompletten Kreis an der Koordinate (160/120) mit einem Radius von 40.
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas id="can" width="320" height="240" style="width: 320px; height: 240px"></canvas>
</body>
<script type="text/javascript">
ctx.strokeStyle = "#000000";
ctx.stroke();
</script>
</html>1.1 Kreuzen Sie die Vorraussetzungen an, damit Sie mit <canvas> arbeiten können.
- Webbrowser mit <canvas> Unterstützung
- Webkit Plugin
- aktiviertes Javascript
- HTML Dokument mit <canvas> im <body>
- CSS3 Unterstüzung
1.2 Was passiert mit dem Inhalt eines <canvas> bei einer Abweichung der Attributswerte Höhe und Breite von den Stylesheetwerten ?
- die Inhalte werden nur teilweise dargestellt
- es kommt zu einer Skalierung aller Inhalte
- der Inhalt kann nicht dargestellt werden
1.3 Was können Sie alles mit den "drawImage" Funktionen machen ?
- Images rotieren
- Images skalieren
- Images positionieren
- Imageparts selektieren
- Images perspektivisch verzerren
2.1 Ergänzen Sie nachfolgenden Code um ein Viereck zu erzeugen.
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,220);
ctx.lineTo(220,220);
ctx.lineTo(220,20);
ctx.closePath();
ctx.strokeStyle = '#000000';
ctx.stroke();
</script>2.2 Ergänzen Sie nachfolgenden Code um ein schwarz befülltes Viereck mit drei Befehlen zu erzeugen.
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
ctx.beginPath();
ctx.rect(20, 20, 200, 200);
ctx.closePath();
ctx.fillStyle = '#000000';
ctx.fill();
</script>2.3 Ergänzen Sie nachfolgenden Code um ein Bild an der Koordinate (20/20) mit einer Breite und Höhe von 200px auszugeben.
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.src = "images/testbild.png";
img.onload = function() {
ctx.drawImage(this, 20, 20, 200, 200);
}
</script>3.1 Kann der Funktion "drawImage" der Context eines <canvas> übergeben werden, begründe ?
Nein, der Funktion „drawImage“ können nur Image- oder Canvas-Objekte übergeben werden. Der Context beinhaltet eine Referenz auf das Framework, dieses kann nicht gezeichnet werden!
3.2 Welcher Unterschied besteht zwischen den <canvas> Attribut- zu Stylesheetwerten für Höhe und Breite ?
Die Attribute Höhe und Breite definieren die Auflösung. Im Stylesheet definieren Höhe und Breite die Objektgröße.
3.3 Greifen Sie auf das <canvas> zu und erzeugen Sie einen kompletten Kreis an der Koordinate (160/120) mit einem Radius von 40.
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas id="can" width="320" height="240" style="width: 320px; height: 240px"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById("can");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.arc(160, 120, 40, 0, Math.PI * 2, false);
ctx.closePath();
ctx.strokeStyle = "#000000";
ctx.stroke();
</script>
</html>| Student | Allgemein | Images | Pathes | Gradients | Aufgaben | Präsentation | Dokumentation |
|---|---|---|---|---|---|---|---|
| Fabian Zimmerman | 50% | 75% | 25% | quadraticCurveTo, addColorStop | 50% | 75% | 25% |
| Nico Löbbert | 50% | 25% | 75% | bezierCurveTo, addColorStop | 50% | 25% | 75% |
##About Ein Studienprojekt der Fachhochschule Köln
verfasst von Fabian Zimmermann und Nico Löbbert, betreut von Volker Schäfer.
Links
- http://de.wikipedia.org/wiki/WebKit
- http://de.wikipedia.org/wiki/Khronos_Group
- http://de.wikipedia.org/wiki/OpenGL_ES
Quellen
Beispiele