La balise HTML5 Canvas utilise les compétences du didacticiel collection_html5

1. Concepts de base

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.

Vous pouvez également trouver des exemples de Canvas intéressants 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

Le code est le suivant :

Bien sûr, cela crée simplement un objet Canvas et n'effectue aucune opération dessus. Pour le moment, l'élément canvas ne semble pas différent de l'élément div. Rien sur la page Je ne peux pas le dire. :)
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 :

L'embarras de Firefox 3.0.x

Bien que Firefox 3.0.x prenne en charge l'élément canvas, il n'est pas implémenté en totale conformité avec la spécification. Les méthodes fillText et MeasureText de la spécification sont remplacées par plusieurs méthodes spécifiques à Firefox dans Firefox 3.0.x. 3.0 Lorsque vous utilisez Canvas dans .x, vous devez d'abord corriger les différences entre ces méthodes dans les différents navigateurs.

Le code suivant est extrait du projet

Mozilla Bespin

, qui corrige l'incohérence entre l'objet Context de Canvas dans Firefox 3.0.x et la spécification HTML5 : function fixContext(ctx) {

// * mise à niveau du rendu du texte de Firefox 3.0.x vers la norme HTML 5

if (!ctx.fillText && ctx.mozDrawText) {
ctx.fillText = function( textToDraw, x, y, maxWidth) {
ctx.translate(x, y);
ctx.mozTextStyle = ctx.font;
ctx.mozDrawText(textToDraw); x, -y);
};
}
// * Configuration 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 }
}; 🎜>// * Configuration html5MeasureText
if (ctx.measureText && !ctx.html5MeasureText) {
ctx.html5MeasureText = ctx.measureText
ctx.measureText = function(text) {
var textMetrics; = ctx.html5MeasureText(text);
// simulez jusqu'à ce que vous y parveniez
textMetrics.ascent = ctx.html5MeasureText("m").width;
return textMetrics
}; 🎜>}
// * pour les autres navigateurs, sans opération
if (!ctx.fillText) {
ctx.fillText = function() {}
}
if ( !ctx.measureText) {
ctx.measureText = function() { return 10;
}
return ctx;

Remarque : depuis Opera 9.5, Opera ne prend pas en charge fillText et ses méthodes et propriétés associées de l'objet Canvas dans la spécification HTML5.



Bonjour, Toile !

Après une compréhension préliminaire de Canvas, nous avons commencé à écrire notre premier programme Canvas, une autre branche du célèbre HelloWorld "Hello, Canvas" :

运行示例，Canvas 对象所在区域显示出"Bonjour, Monde !", 这正是代码中 ctx.fillText("Bonjour, Monde!", 20, 20); 的作用。

fillText 以及相关属性

fillText 方法用来在 Canvas 中显示文字，它可以接受四个参数，其中最后一个是可选的：

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

其中 maxWidth 表示显示文字时最大的宽度，可以防止文字溢出，不过我在测试中发现在 Firefox 与 Chom re 中指定了 maxWidth 时也没有任何效果。 Il s'agit de « 20 pt Arial »看具体的效果。

二、路径

图形的基础 - 路径

在 Canvas 中，所有基本图形都是以路径为基础的，也就是说，我们在调用 2dContext 的 lineTo、rect 等方法时，其Le contexte est important.最后使用 fill 或 AVC 方法进行绘制时，都是依据这些路径点来进行填充或画线。 Context.beginPath() Context Context则接下来绘制的路径会与之前绘制的路径叠加，在填充或画边框Il s'agit d'un exemple de contexte.closePath().另外，如果在填充时路径没有关闭，那么 Context 会自动调用 closePath 方法将路径关闭。

基本路径方法

1. startPath, closePath

在 Canvas 中使用路径时，应该要保持一个良好的习惯，每次开始绘制路径前都要调用一次 beginPath 方法，否则画出来的效果难看不说，还会严重影响性能。

在下面这张图中，左边的图形在每次绘制矩形前都调用了一次 beginPath 来清除之前的路径并重了一次beginPath 来清除路径，因此，虽然这里是使用的边框色是 #666，但是右边的图形颜色比左边的深一些，因Il s'agit d'un accident vasculaire cérébral.就比原来深一些。

Lorsque le nombre de chemins dans le Contexte est petit, les performances sont acceptables si l'effet d'affichage n'est pas pris en compte. Cependant, si le nombre de chemins dans le Contexte est grand, beginPath n'est pas utilisé avant de commencer à tracer un nouveau chemin. , car chaque dessin Le chemin précédent devra être redessiné et les performances chuteront de façon exponentielle.

Par conséquent,

Sauf en cas de besoins particuliers, startPath doit être appelé pour démarrer un nouveau chemin à chaque fois avant de commencer à tracer un chemin.

2. Mouvement et ligne droite moveTo, lineTo, rect

void moveTo(in float x, in float y);

Lorsque vous dessinez un chemin dans Canvas, il n'est généralement pas nécessaire de spécifier un point de départ. Le point de départ par défaut est le point final du dernier chemin tracé. Par conséquent, si vous devez spécifier un point de départ, vous devez utiliser. la méthode moveTo pour spécifier la position vers laquelle se déplacer.

void lineTo(in float x, in float y);

La méthode lineTo trace un chemin direct vers l'emplacement spécifié. Après avoir appelé la méthode lineTo, le point de départ du dessin à l'intérieur du Context se déplacera vers le point final de la ligne droite.

void rect(en float x, en float y, en float w, en float h);

La méthode rect est utilisée pour tracer un chemin rectangulaire, en spécifiant la position du coin supérieur gauche, la largeur et la hauteur via des paramètres. Après avoir appelé rect , le point de départ du dessin de Context se déplacera vers le coin supérieur gauche du rectangle dessiné par rect .

La méthode

rect est un peu différente de la méthode arc qui sera présentée plus tard et des autres méthodes de chemin. Elles utilisent des paramètres pour spécifier le point de départ, plutôt que d'utiliser le point de départ maintenu en interne par Context.

3. Courbe arcTo, arc, quadraticCurveTo, bezierCurveTo

void arcTo(en float x1, en float y1, en float x2, en float y2, en float radius);

Selon les instructions du document WHATWG, cette méthode consiste à tracer un arc tangent à deux rayons L'un des deux rayons passe par le Contexte pour tracer le point de départ et le point final est (x1, y1), et l'autre passe par (x2, y2), le point final est (x1, y1), cet arc est le plus petit arc tangent à ces deux rayons. Après avoir appelé la méthode arcTo, ajoutez le point tangent entre l'arc et le rayon (x1, y1)-(x2, y2) au chemin actuel comme point de départ du dessin suivant. Lors des tests, il a été constaté que Firefox et Opera ne prennent actuellement pas bien en charge cette méthode, et seuls Chrome et Safari 4 peuvent tracer le chemin correct.

arc vide (en float x, en float y, en float radius, en float startAngle, en float endAngle, en booléen dans le sens inverse des aiguilles d'une montre);

La méthode
arc est utilisée pour tracer un chemin d'arc, en spécifiant la position et la taille de l'arc passant par la position centrale, le radian de départ et le radian de fin. Cette méthode également

ne dépend pas

du dessin de départ. point maintenu par Context. Le sens de rotation lors du dessin d'un arc est spécifié par le dernier paramètre dans le sens inverse des aiguilles d'une montre. S'il est vrai, c'est dans le sens inverse des aiguilles d'une montre, et s'il est faux, c'est dans le sens des aiguilles d'une montre.

void quadraticCurveTo(en float cpx, en float cpy, en float x, en float y);

La méthode quadraticCurveTo est utilisée pour tracer un chemin de spline quadratique. Les paramètres cpx et cpy spécifient la position du point de contrôle, x et y spécifient la position du point final, et le point de départ est le point de départ du dessin maintenu par. Contexte.

void bezierCurveTo(en float cp1x, en float cp1y, en float cp2x, en float cp2y, en float x, en float y);

La méthode bezierCurveTo est utilisée pour tracer un chemin de courbe de Bézier. Elle est similaire à quadraticCurveTo, mais la courbe de Bézier a deux points de contrôle, donc les cp1x, cp1y, cp2x, cp2y dans les paramètres sont utilisés pour spécifier les positions du deux points de contrôle, tandis que x et y précisent la position de la touffe.

4. remplir, contourner, découper


Les deux méthodes fill et Stroke sont faciles à comprendre et sont utilisées respectivement pour remplir des chemins et tracer des lignes de chemin.

La méthode clip est utilisée pour définir une zone de découpage pour Canvas. Le code après l'appel de la méthode clip n'est valide que pour cette zone de découpage définie et n'affectera pas les autres endroits. Par défaut, la zone de découpage est un rectangle avec le coin supérieur gauche à (0, 0) et une largeur et une hauteur égales respectivement à la largeur et à la hauteur de l'élément Canvas.




Lors du dessin de cette image, bien que fillRect(0, 0, 100, 100) ait été utilisé deux fois pour remplir un rectangle de 100x100, le résultat affiché est que seule une petite zone au milieu a été remplie la deuxième fois. La méthode clip est utilisée pour définir la zone de découpage entre deux remplissages, de sorte que le deuxième remplissage n'affecte que la petite zone au milieu.

5. clearRect, fillRect, StrokeRect

Ces trois méthodes ne sont pas des méthodes de chemin, mais sont utilisées pour traiter directement le contenu sur le Canvas, ce qui équivaut à l'arrière-plan du Canvas. L'appel de ces trois méthodes n'affectera pas le point de départ du dessin de Contexte. Lorsque vous souhaitez effacer tout le contenu du canevas, vous pouvez appeler directement context.clearRect(0, 0, width, height) pour l'effacer directement, au lieu d'utiliser la méthode path pour tracer un chemin rectangulaire du même taille comme toile, puis utilisez la méthode de remplissage.

Conclusion

Grâce à la méthode path de Canvas, vous pouvez utiliser Canvas pour traiter certains graphiques vectoriels simples, afin qu'ils ne soient pas déformés lors de la mise à l'échelle. Cependant, la méthode path de Canvas n'est pas très puissante, du moins elle n'a même pas de chemin elliptique...

Références

1.

L'élément Canvas, WHATWG