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

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

WBOY

Freigeben： 2016-05-16 15:51:37

Original

1286 Leute haben es durchsucht

Was ist Canvas?

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

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 规范不一致的地方：

提示：您可以先修改部分代码再运行

注意：到 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