Premiers pas avec HTML5 Canvas (1) - Concepts de base_html5 Compétences du didacticiel

Qu'est-ce que Canvas

est un nouvel élément HTML, défini dans HTML5. Cet élément peut généralement être utilisé pour dessiner des graphiques, synthétiser des images, etc. dans des pages HTML via JavaScript, et peut également être utilisé pour réaliser certaines animations. Bien entendu, la spécification HTML5 est encore au stade de projet et la version officielle devra peut-être attendre jusqu'en 2010, mais de nombreux navigateurs prennent déjà en charge une partie de la spécification HTML5. Les navigateurs qui prennent actuellement en charge l'élément canvas incluent Firefox 3, Safari 4, Chrome 2.0, etc. Par conséquent, lorsque vous exécutez les exemples de cette page, assurez-vous que vous utilisez l'un des navigateurs ci-dessus.

Bien qu'il existe de nombreux tutoriels sur Canvas dans Mozilla, j'ai décidé d'enregistrer mon processus d'apprentissage. Si vous pensez que ce que j'ai écrit n'est pas assez clair, vous pouvez trouver un lien vers le tutoriel Canvas sur le site de Mozilla dans les références.

De plus, quelques exemples intéressants de Canvas peuvent être trouvés ici.

Démarrez avec Canvas

L'utilisation de Canvas est très simple. Tout comme l'utilisation d'autres éléments HTML, il vous suffit d'ajouter une balise

Copier le codeLe code est le suivant :

Bien sûr, cela crée simplement un objet Canvas et n'effectue aucune opération dessus. Le canevas à ce niveau time L'élément n'est pas différent de l'élément div, rien n'est visible sur la page :)

De plus, la taille de l'élément canvas peut être spécifiée via les attributs width et height, ce qui est quelque peu similaire à l'élément img .

Le cœur de Canvas : le contexte
Comme mentionné précédemment, l'objet Canvas peut être utilisé via JavaScript pour dessiner des graphiques, synthétiser des images, etc. Ces opérations ne sont pas effectuées via l'objet Canvas lui-même, mais cela est effectué en obtenant le contexte de l'opération Canvas via une méthode getContext de l'objet Canvas. En d'autres termes, lorsque nous utiliserons l'objet Canvas ultérieurement, nous traiterons du contexte de l'objet Canvas, et l'objet Canvas lui-même pourra être utilisé pour obtenir des informations telles que la taille de l'objet Canvas.
Obtenir le contexte de l'objet Canvas est très simple. Il suffit d'appeler directement la méthode getContext de l'élément canvas. Lors de l'appel, vous devez passer un paramètre de type Context. La seule valeur de type actuellement disponible est 2d :

Astuce : Vous pouvez modifier une partie du code avant d'exécuter

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

Exécutez l'exemple et la zone où se trouve l'objet Canvas affiche "Hello, World!". C'est exactement ce que fait ctx.fillText("Hello, World!", 20, 20);

fillText et attributs associés

La méthode

fillText est utilisée pour afficher du texte dans Canvas. Elle peut accepter quatre paramètres, dont le dernier est facultatif :

void fillText(dans le texte DOMString, dans float x, dans float y, [Facultatif] dans float maxWidth);

où maxWidth représente la largeur maximale lors de l'affichage du texte, ce qui peut empêcher le débordement du texte. Cependant, lors de mes tests, j'ai constaté que spécifier maxWidth dans Firefox et Chomre n'avait aucun effet.

Avant d'utiliser la méthode fillText, vous pouvez ajuster la police du texte affiché en définissant l'attribut de police du Context. Dans l'exemple ci-dessus, j'ai utilisé "20pt Arial" comme police du texte affiché. vous valorise. Regardez les effets spécifiques.

Fin

C'est tout pour l'instant, j'écrirai cette série en lisant le cahier des charges :)

Matériels de référence

1. HTML5 Canvas, une nouvelle étape pour les langages de script, hred

2. L'élément Canvas, WHATWG

3. Tutoriel Canvas chinois, Mozilla

4. Tutoriel Canvas anglais, Mozilla

5. support de toile dans Opera, Opera