Erste Schritte mit HTML5 Canvas (1) – Grundlegende Konzepte_HTML5-Tutorial-Fähigkeiten

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 in 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.

Einige interessante Canvas-Beispiele finden Sie hier.

Erste Schritte mit 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

Code kopierenDer Code lautet wie folgt:

Natürlich wird dadurch einfach ein Canvas-Objekt erstellt und keine Operationen daran ausgeführt. Die Leinwand hier time Das Element sieht nicht anders aus als das div-Element, 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 .

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 ausgeführt. Dies erfolgt jedoch durch Abrufen des Canvas-Operationskontexts über eine Methode getContext des Canvas-Objekts. 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 Methode getContext des Canvas-Elements auf. Der einzige derzeit verfügbare Typwert ist 2d:

Tipp: Sie können einen Teil des Codes ändern, bevor Sie ausführen

Firefox 3.0.x 的尴尬

Firefox 3.0.x 虽然支持了 canvas 元素，但是并没有完全按照规范来实现，规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替，因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。

下面这代码取自 Mozilla Bespin 项目，它修正了 Firefox 3.0.x 中 Canvas 的 Context 对象与 HTML5 规范不一致的地方：

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; }
提示：您可以先修改部分代码再运行

注意：到 Opera 9.5 为止，Opera 还不支持 HTML5 规范中 Canvas 对象的 fillText 以及其相关方法和属性。

Hello, Canvas!

在对 Canvas 进行了一些初步了解后，开始来写我们的第一个 Canvas 程序，闻名的 HelloWorld 的又一个分支“Hello, Canvas”：

<canvas id="screen" width="400" height="400"></canvas> <script type="text/javascript"> (function() { var canvas = document.getElementById("screen"); var ctx = fixContext(canvas.getContext("2d")); ctx.font = "20pt Arial"; ctx.fillText("Hello, Canvas!", 20, 20); ctx.fillText("www.xujiwei.com", 20, 50); 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; } })(); </script>
提示：您可以先修改部分代码再运行

Führen Sie das Beispiel aus und der Bereich, in dem sich das Canvas-Objekt befindet, zeigt „Hello, World!“ an. Genau das macht ctx.fillText("Hello, World!", 20, 20);

fillText und zugehörige Attribute

Die

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, wodurch ein Überlaufen des Texts verhindert werden kann. Bei meinen Tests habe ich jedoch festgestellt, dass die Angabe von maxWidth in Firefox und Chomre keine Auswirkung hat.

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 Schätzen Sie sich selbst. Schauen Sie sich die spezifischen Auswirkungen an.

Ende

Das war's fürs Erste, ich werde diese Serie schreiben, während ich die Spezifikationen lese:)

Referenzmaterialien

1. HTML5 Canvas, eine neue Stufe für Skriptsprachen, hred

2. Das Canvas-Element, WHATWG

3. Canvas-Tutorial Chinesisch, Mozilla

4. Canvas-Tutorial Englisch, Mozilla

5. Canvas-Unterstützung in Opera, Opera