Erste Schritte mit HTML5 Canvas (1) – Grundkonzepte

Was ist Canvas?

5ba626b379994d53f7acf72a64f9b697 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 5ba626b379994d53f7acf72a64f9b697 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:)

Darüber hinaus kann die Größe des Canvas-Elements über die Attribute width und height angegeben werden, was dem img-Element etwas ähnelt.

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

Der Kern von Canvas: Kontext

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>

Obwohl Firefox 3.0.x das Canvas-Element unterstützt, ist es nicht in vollständiger Übereinstimmung mit der Spezifikation implementiert. Die beiden Methoden fillText und MeasureText sind in der Spezifikation enthalten sind in Firefox 3.0 .x durch mehrere Firefox-spezifische Methoden ersetzt worden. Daher müssen Sie bei der Verwendung von Canvas in Firefox 3.0.x zunächst die Unterschiede zwischen diesen Methoden in verschiedenen Browsern beheben.

Der folgende Code stammt aus dem Mozilla Bespin-Projekt, das die Inkonsistenz zwischen dem Canvas-Kontextobjekt in Firefox 3.0.x und der HTML5-Spezifikation behebt:

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; 
}

Hallo, Canvas!

Nachdem wir zunächst etwas über Canvas verstanden hatten, begannen wir, unser erstes Canvas-Programm zu schreiben, einen weiteren Zweig des berühmten HelloWorld „Hello, Canvas“:

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.

fillText und verwandte Attribute

fillText-Methode wird zum Anzeigen von Text in Canvas verwendet. Sie kann vier Parameter akzeptieren, von denen der letzte optional ist:

void fillText( in DOMString text, in float x, in float y, [Optional] in float maxWidth);

wobei maxWidth die maximale Breite beim Anzeigen von Text darstellt, was jedoch verhindern kann, dass Text überläuft Es gibt ein Problem zwischen Firefox und Es gibt keine Auswirkung, wenn maxWidth in Chomre angegeben wird.

Bevor Sie die fillText-Methode verwenden, können Sie die Schriftart des angezeigten Texts anpassen, indem Sie das Schriftartattribut des Kontexts festlegen. Im obigen Beispiel habe ich „20pt Arial“ als Schriftart des angezeigten Texts verwendet Sie können selbst verschiedene Schriftarten festlegen, um den spezifischen Effekt zu sehen.

Das Obige ist der Inhalt von HTML5 Canvas Erste Schritte (1) – Grundkonzepte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!