1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
---
title: Grundlagen Canvas
slug: Web/Guide/HTML/Canvas_Tutorial/Grundlagen
tags:
- Canvas
- Graphics
- HTML
- Intermediate
- Tutorial
translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
---
<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
<div class="summary">
<p>Beginnen wir diese Einführung mit einem Blick auf das {{Glossary("HTML")}}-Element {{HTMLElement("canvas")}} an sich. Am Ende wirst du in einem Canvas einen 2D-Context anlegen können und ein erstes Beispiel im Browser gezeichnet haben.</p>
</div>
<h2 id="Das_<canvas>-Element">Das <code><canvas></code>-Element</h2>
<p>Beginnen wir mit dem {{HTMLElement("canvas")}}-Element:</p>
<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas>
</pre>
<p>Auf den ersten Blick sieht ein {{HTMLElement("canvas")}} wie ein {{HTMLElement("img")}}-Element aus, mit dem Unterschied, dass es die Attribute <code>src</code> und <code>alt</code> nicht besitzt. Das <code><canvas></code>-Element hat nur zwei Attribute - {{htmlattrxref("width", "canvas")}} und {{htmlattrxref("height", "canvas")}}. Diese sind optional und können auch über {{Glossary("DOM")}}-<a href="/de/docs/Web/API/HTMLCanvasElement">Eigenschaften</a> gesetzt werden. Wenn die Attribute nicht gesetzt sind, bekommt das Element eine Breite von <strong>300px</strong> und eine Höhe von <strong>150px</strong>. Die Maße des canvas können auch über {{Glossary("CSS")}} gesetzt werden, allerdings wird das Bild dann auf die gesetzte Größe skaliert. Wenn das Verhältnis der CSS-Maße nicht zur ursprünglichen Größe passt, wird das Bild verzerrt.</p>
<div class="note">
<p><strong>Hinweis:</strong> Wenn das Ergebnis des Renderings verzerrt wirkt, dann setze bitte die Attribute <code>width</code> und <code>height</code> explizit im <code><canvas></code> und nicht über CSS.</p>
</div>
<p>Das <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute#id">id</a>-Attribut ist eines der <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a> in HTML, welche auf alle HTML-Elemente anwendbar sind (sein sollen). Es empfiehlt sich eine <code>id</code> zu vergeben, dadurch wird der Zugriff mit JavaScript/CSS vereinfacht.</p>
<p>Auch wenn man nicht mit CSS die Maße des canvas festlegen sollte, kann man jegliche andere CSS-Eigenschaften auf das {{HTMLElement("canvas")}}-Element anwenden (margin, border, background etc). Diese CSS-Regeln haben keinen Effekt auf das eigentliche Zeichnen (anders bei <a href="https://developer.mozilla.org/de/docs/SVG">SVG</a>)</p>
<div id="section_2">
<h3 id="Fallback">Fallback</h3>
<p>Einige ältere Browser unterstützen das {{HTMLElement("canvas")}}-Element nicht, deshalb sollte man einen sogenannten Fallback schreiben, welcher nur den Browsern angezeigt wird, welche das {{HTMLElement("canvas")}}-Element nicht unterstützen. Browser, die das {{HTMLElement("canvas")}}-Element unterstützen zeigen diesen Fallback nicht.</p>
<p>Beispiele:</p>
<pre class="brush: html"><canvas id="stockGraph" width="150" height="150">
aktueller Wechselkurs: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>
</pre>
<h3 id="Benötigter_<canvas>-Tag">Benötigter <code></canvas></code>-Tag</h3>
<p>Im Unterschied zu dem {{HTMLElement("img")}}-Element, <strong>benötigt</strong> das {{HTMLElement("canvas")}}-Element den Endtag (<code></canvas></code>).</p>
<p>Wenn kein Fallback definiert wird, reicht ein <code><canvas id="foo" ...></canvas></code> völlig aus.</p>
<h2 id="Der_Kontext">Der Kontext</h2>
<p>{{HTMLElement("canvas")}} stellt mehrere Kontexte zum Zeichnen auf dem canvas zur Verfügung. Der Standardkontext ist der 2D-Kontext. Es gibt noch <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> (3D context) basierend auf <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p>
<p>Zuerst ist das canvas leer. Mithilfe von JavaScript definiert man den Kontext und zeichnet mit diesem. Das {{HTMLElement("canvas")}}-Element hat eine <a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods" title="/en-US/docs/Web/API/HTMLCanvasElement#Methods">Methode</a> <code>getContext()</code>, mit der der Kontext definiert wird. <code>getContext()</code> benötigt nur einen String als Argument, den Typ des Kontextes. Für 2D-Grafiken ist dieser String "2d".</p>
<pre class="brush: js">var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");
</pre>
<p>Die erste Zeile speichert in der Variablen <code>canvas</code> den DOM-Knoten unseres canvas mithilfe der {{domxref("document.getElementById()")}}-Methode. Danach wird die <code>getContext()</code>-Methode aufgerufen, um den Kontext in der Variablen <code>ctx</code> zu speichern.</p>
<div id="section_5">
<h2 id="Browserkompatibilität_prüfen">Browserkompatibilität prüfen</h2>
<p>Nicht nur der Fallback kann die Browserkompatibilität prüfen. Auch mit JavaScript ist dies möglich, in dem die Existenz der <code>getContext()</code>-Methode überprüft wird. Beispiel:</p>
<pre class="brush: js">var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// weiterer Code
} else {
alert("Dein Browser unterstützt das <canvas> Element nicht")
}
</pre>
</div>
</div>
<h2 id="HTML-Struktur">HTML-Struktur</h2>
<p>Eine einfache HTML-Struktur reicht für unser Tutorial erst einmal völlig aus.</p>
<div class="note">
<p><strong>Hinweis</strong>: Es gilt als schlechter Stil, Skripte direkt in HTML einzubetten. Wir tun das hier nur aus Gründen der Kompaktheit.</p>
</div>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
</pre>
<p>Das Skript enthält eine Funktion <code>draw()</code>, die nach dem Laden der Seite ausgeführt wird; dies geschieht durch Hören auf das {{event("load")}}-Ereignis des Dokuments. Diese oder eine ähnliche Funktion könnte auch durch {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} oder jeden anderen Ereignisbehandler aufgerufen werden, solange die Seite vorher geladen wurde.</p>
<p>So sieht die Vorlage in Aktion aus. Wie man hier sehen kann, ist sie anfangs leer.</p>
<p>{{EmbedLiveSample("HTML-Struktur", 160, 160)}}</p>
<h2 id="Einfaches_Beispiel">Einfaches Beispiel</h2>
<p>Im einfachen Beispiel werden zwei Rechtecke gezeichnet, eins mit Transparenz.</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
</pre>
<p>Demo:</p>
<p>{{EmbedLiveSample("Einfaches_Beispiel", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}</p>
|
