HTML and CSS Reference
In-Depth Information
</script>
</head>
<body>
<div id "topbar">
<divid "title">EinfacherCanvas</div>
</div>
<div id "content">
<ulclass "pageitem">
<liclass "textbox"id "box">
<canvas style "border: 1px dotted black;" width "280"
height "150" id "myCanvas">
Ihr Browser unterstützt kein HTML5 Canvas!
</canvas>
<pid 'message'>
Falls Sie eine zweite Grafik unten sehen, dann unterstüzzt
ihr Browser canvas.toDataURL()</p>
</li>
</ul>
</div>
</body>
</html>
Bild 2.4:
Ein einfacher Canvas unter iOS 4.
Die folgenden Abschnitte stellen Ihnen Schritt für Schritt die Methoden und Konzepte des
HTML5-Canvas vor, sind aber keineswegs als vollständige und umfassende Einführung
gedacht, denn das würde ein eigenes Buch füllen. Dennoch werden die meisten und
wichtigsten Features des HTML5-Canvas vorgestellt, um Ihnen einen guten Überblick zu
geben. Der Canvas aller Beispiele hat eine Breite von 280 Pixeln und eine Höhe von 300
Pixeln. Die Variable
ctx
referenziert in allen Beispielen den 2-D-Kontext des Canvas:
var canvas document.getElementById('myCanvas');
var ctx canvas.getContext('2d');
... Beispielcode ...
