Erste Schritte mit HTML5 Canvas (1) – Grundkonzepte

Was ist Canvas?

ist ein neues HTML-Element, das in HTML5 definiert ist. Dieses Element kann normalerweise zum Zeichnen von Grafiken, zum Synthetisieren von Bildern usw. in HTML-Seiten über JavaScript und auch zum Erstellen einiger Animationen verwendet werden. Natürlich befindet sich die HTML5-Spezifikation noch im Entwurfsstadium und die offizielle Veröffentlichung muss möglicherweise bis 2010 warten, aber viele Browser unterstützen bereits einen Teil der HTML5-Spezifikation. Zu den Browsern, die derzeit das Canvas-Element unterstützen, gehören Firefox 3+, Safari 4, Chrome 2.0+ usw. Stellen Sie daher beim Ausführen der Beispiele auf dieser Seite sicher, dass Sie einen der oben genannten Browser verwenden.

Obwohl es bei Mozilla viele Tutorials zu Canvas gibt, habe ich beschlossen, meinen Lernprozess aufzuzeichnen. Wenn Sie der Meinung sind, dass das, was ich geschrieben habe, nicht klar genug ist, finden Sie in den Referenzen einen Link zum Canvas-Tutorial auf der Mozilla-Website.

Außerdem finden Sie hier einige interessante Canvas-Beispiele.

Beginnen Sie mit der Verwendung von Canvas

Die Verwendung von Canvas ist sehr einfach. Genau wie bei der Verwendung anderer HTML-Elemente müssen Sie der Seite nur ein hinzufügen 🎜 >
Natürlich wird dadurch einfach ein Canvas-Objekt erstellt und keine Operationen daran ausgeführt. Zu diesem Zeitpunkt unterscheidet sich das Canvas-Element nicht vom div-Element und auf der Seite ist nichts zu sehen:)

<canvas id="screen" width="400" height="400"></canvas>

Wie bereits erwähnt, kann das Canvas-Objekt über JavaScript bedient werden, um Grafiken zu zeichnen, Bilder zu synthetisieren usw. Diese Vorgänge werden nicht über das Canvas-Objekt selbst, sondern über einen Teil davon ausgeführt Canvas-Objekt. Die Methode getContext ruft den auszuführenden Canvas-Vorgangskontext ab. Mit anderen Worten: Wenn wir später das Canvas-Objekt verwenden, befassen wir uns mit dem Kontext des Canvas-Objekts, und das Canvas-Objekt selbst kann verwendet werden, um Informationen wie die Größe des Canvas-Objekts abzurufen.
Das Abrufen des Kontexts des Canvas-Objekts ist einfach. Rufen Sie einfach die getContext-Methode des Canvas-Elements auf. Der einzige derzeit verfügbare Typwert ist 2d:


Die Peinlichkeit von Firefox 3.0.x

<canvas id="screen" width="400" height="400"></canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById("screen"); 
var ctx = canvas.getContext("2d"); 
</script>

Hinweis: Ab Opera 9.5 unterstützt Opera fillText und die zugehörigen Methoden und Eigenschaften des Canvas-Objekts in der HTML5-Spezifikation noch nicht.

function fixContext(ctx) { 
// * upgrade Firefox 3.0.x text rendering to HTML 5 standard 
if (!ctx.fillText && ctx.mozDrawText) { 
ctx.fillText = function(textToDraw, x, y, maxWidth) { 
ctx.translate(x, y); 
ctx.mozTextStyle = ctx.font; 
ctx.mozDrawText(textToDraw); 
ctx.translate(-x, -y); 
}; 
} 
// * Setup measureText 
if (!ctx.measureText && ctx.mozMeasureText) { 
ctx.measureText = function(text) { 
if (ctx.font) ctx.mozTextStyle = ctx.font; 
var width = ctx.mozMeasureText(text); 
return { width: width }; 
}; 
} 
// * Setup html5MeasureText 
if (ctx.measureText && !ctx.html5MeasureText) { 
ctx.html5MeasureText = ctx.measureText; 
ctx.measureText = function(text) { 
var textMetrics = ctx.html5MeasureText(text); 
// fake it 'til you make it 
textMetrics.ascent = ctx.html5MeasureText("m").width; 
return textMetrics; 
}; 
} 
// * for other browsers, no-op away 
if (!ctx.fillText) { 
ctx.fillText = function() {}; 
} 
if (!ctx.measureText) { 
ctx.measureText = function() { return 10; }; 
} 
return ctx; 
}

Wenn Sie das Beispiel ausführen, wird in dem Bereich, in dem sich das Canvas-Objekt befindet, „Hello, World!“ angezeigt, was genau das ist, was ctx.fillText("Hello, World!", 20, 20); im Code bewirkt.