Apprendre HTML5 Canvas : un seul article suffit

1. Introduction au Canvas

<canvas>OuiHTML5Nouvellement ajouté, un élément capable d'utiliser des scripts (généralementJavaScript) pour y dessiner des imagesHTMLélément.

Il a d'abord été utilisé par Apple en interne à l'aide de son propreMacOS X WebKitlancé, pour que des applications utilisent des composants comme Dashboard etSafaril'utilisation du navigateur. Plus tard, quelqu'un viaGeckoles navigateurs à noyau (en particulierMozillaetFirefox)，OperaetChromeet le Web Hypertext Application Technology Working Group ont suggéré d'utiliser cet élément pour les technologies web de nouvelle génération.

CanvasestHTMLune zone dessinable définie par le code ainsi que par les attributs height et width.JavaScriptLe code peut accéder à cette zone, comme à d'autres interfaces génériques bidimensionnellesAPI, grâce à un ensemble complet de fonctions de dessin permettant de générer dynamiquement des graphiques.

Les programmes Mozilla le prennent en charge depuis Gecko 1.8 (Firefox 1.5)<canvas>, Internet Explorer à partir d'IE9<canvas>. Chrome et Opera 9+ prennent également en charge<canvas>。

2. Utilisation de base de Canvas

<canvas id="tutorial" width="300" height="300"></canvas>

2.1 `<canvas>`Élément

<canvas>ressemble à<img>la balise, sauf que<canvas>ne possède que deux attributs optionnelswidth、heigthattributs, et aucunsrc、altdes attributs.

Si vous ne<canvas>setwidht、heightles attributs, alors par défautwidthest 300,heightest 150, et les unités sont toutespx. Vous pouvez également utilisercssattributs pour définir la largeur et la hauteur, mais si les attributs width et height sont incohérents avec le ratio initial, l'image apparaîtra déformée. Par conséquent, il est recommandé de ne jamais utilisercssattributs pour définir<canvas>la largeur et la hauteur.

Contenu de remplacement

Parce que certains navigateurs plus anciens (en particulier les navigateurs IE antérieurs à IE9) ou des navigateurs ne prennent pas en charge l'élément HTML<canvas>, sur ces navigateurs, vous devriez toujours pouvoir afficher le contenu de remplacement.

Prenant en charge<canvas>les navigateurs n'afficheront que<canvas>la balise, et ignoreront le contenu de remplacement à l'intérieur. Les navigateurs qui ne prennent pas en charge<canvas>afficheront directement le contenu de remplacement.

Remplacer par du texte :

<canvas>
    你的浏览器不支持 canvas，请升级你的浏览器。
</canvas>

use<img>Remplacement :

<canvas>
    <img src="./美女.jpg.html" alt=""> 
</canvas>

La balise de fermeture</canvas>ne peut pas être omise.

et<img>Contrairement à l'élément,<canvas>l'élément nécessite une balise de fermeture (</canvas>). Si la balise de fermeture n'existe pas, le reste du document sera considéré comme du contenu de remplacement et ne sera pas affiché.

2.2 Contexte de rendu (Le contexte de rendu)

<canvas>créera un canvas de taille fixe et exposera un ou plusieurscontextes de rendu(pinceau), pour utilisercontexte de rendupour dessiner et traiter le contenu à afficher.

Nous nous concentrons sur le contexte de rendu 2D. Nous n'étudierons pas les autres contextes pour l'instant. Par exemple, WebGL utilise un contexte 3D basé sur OpenGL ES ("experimental-webgl").

var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

2.3 Vérification de la prise en charge

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

2.4 Modèle de code

Exemple

Essayez-le maintenant »

2.5 Un exemple simple

L'exemple suivant dessine deux rectangles :

Exemple

<canvas id="tutorial" width="300" height="300"></canvas> <script type="text/javascript">function draw(){ var canvas = document.getElementById('tutorial'); if(!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; // dessine le rectangle ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } draw();</script>

Essayez-le maintenant »

3. Dessiner des formes

3.1 Grille`(grid)`et l'espace de coordonnées

Comme le montre la figure ci-dessous,canvasl'élément est recouvert par une grille par défaut. De manière générale, une unité de la grille équivaut àcanvasun pixel dans l'élément. L'origine de la grille est le coin supérieur gauche, avec les coordonnées (0,0). La position de tous les éléments est définie par rapport à l'origine. Par conséquent, le coin supérieur gauche du carré bleu dans la figure a pour coordonnées (x, y), soit x pixels depuis la gauche (axe X) et y pixels depuis le haut (axe Y).

Plus tard, nous aborderons la translation de l'origine des coordonnées, la rotation de la grille et la mise à l'échelle, etc.

3.2 Dessin de rectangles

<canvas>Un seul type de dessin graphique natif est pris en charge :Rectangle. Tous les autres graphiques nécessitent la génération d'au moins un chemin (path). Cependant, nous disposons de nombreuses méthodes de génération de chemins qui permettent de dessiner des graphiques complexes.

canvas fournit trois méthodes pour dessiner des rectangles :

1, fillRect(x, y, width, height): Dessine un rectangle rempli.
2, strokeRect(x, y, width, height): Dessine la bordure d'un rectangle.
3, clearRect(x, y, widh, height): Efface la zone rectangulaire spécifiée, puis cette zone devient complètement transparente.

Explication :Ces 3 méthodes ont les mêmes paramètres.

x, y: Désigne les coordonnées du coin supérieur gauche du rectangle. (Par rapport à l'origine des coordonnées du canvas)
width, height: Désigne la largeur et la hauteur du rectangle à dessiner.

function draw(){ var canvas = document.getElementById('tutorial'); if(!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillRect(10, 10, 100, 50); //Dessin d'un rectangle, la couleur de remplissage par défaut est noire ctx.strokeRect(10, 70, 100, 50); //Dessin d'une bordure de rectangle } draw();

ctx.clearRect(15, 15, 50, 25);

4. Dessin de chemins (`path`)

L'élément de base du graphisme est un chemin.

Un chemin est un ensemble de points de formes différentes formé en reliant des segments de ligne ou des courbes de couleurs et de largeurs différentes.

Un chemin, ou même un sous-chemin, est fermé.

L'utilisation de chemins pour dessiner des graphiques nécessite quelques étapes supplémentaires :

Créer le point de départ du chemin
Appeler des méthodes de dessin pour dessiner le chemin
Fermer le chemin
Une fois le chemin généré, affichez le graphique en traçant le contour ou en remplissant la zone du chemin.

Voici les méthodes nécessaires :

beginPath()

Créer un nouveau chemin. Une fois le chemin créé avec succès, les commandes de dessin graphique sont dirigées vers le chemin pour générer celui-ci.
moveTo(x, y)

Déplacer le stylo vers les coordonnées spécifiées.(x, y)Équivalent à définir les coordonnées du point de départ du chemin.
closePath()

Après avoir fermé le chemin, les commandes de dessin graphique sont redirigées vers le contexte.
stroke()

Dessiner le contour de la forme avec des lignes.
fill()

Générer une forme pleine en remplissant la zone de contenu du chemin.

4.1 Dessin de segments de ligne

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); //Créer un nouveau chemin. ctx.moveTo(50, 50); //Déplacer le stylo vers les coordonnées spécifiées. ctx.lineTo(200, 50); //Tracez une ligne droite de la position actuelle vers les coordonnées spécifiées (200, 50). //Fermez le chemin. Il tracera une ligne droite du point actuel au point de départ du chemin. Si le point actuel coïncide avec le point de départ, rien n'est fait. ctx.closePath(); ctx.stroke(); //Tracez le chemin. } draw();

4.2 Dessiner une bordure de triangle

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.lineTo(200, 200); ctx.closePath(); //Bien que nous n'ayons tracé que deux segments de droite, closePath fermera le chemin, et c'est toujours un triangle. ctx.stroke(); //Contour. stroke() n'appellera pas automatiquement closePath(). } draw();

4.3 Remplir un triangle

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.lineTo(200, 200); ctx.fill(); //Remplissez la zone fermée. Si le chemin n'est pas fermé, fill() fermera automatiquement le chemin. } draw();

4.4 Dessiner des arcs

Il existe deux méthodes pour dessiner des arcs :

1, arc(x, y, r, startAngle, endAngle, anticlockwise): avec(x, y)comme centre, avecrcomme rayon, destartAngleradians de début àendAngleradians de fin.anticlosewiseest une valeur booléenne,trueindique le sens antihoraire,falseindique le sens horaire (par défaut, le sens horaire).

Remarque :

Les degrés ici sont tous en radians.
0Les radians font référence à laxdirection positive de l'axe.
```
radians=(Math.PI/180)*degrees   //角度转换成弧度
```

2, arcTo(x1, y1, x2, y2, radius): Trace un arc en fonction des points de contrôle et du rayon donnés, puis relie les deux points de contrôle par une ligne droite.

Exemple d'arc 1

Exemple d'arc 2

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(50, 50, 40, 0, Math.PI / 2, false); ctx.stroke(); ctx.beginPath(); ctx.arc(150, 50, 40, 0, -Math.PI / 2, true); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false); ctx.fill(); ctx.beginPath(); ctx.arc(150, 150, 40, 0, Math.PI, false); ctx.fill(); } draw();

Exemple d'arc 3

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); //Paramètres 1 et 2 : coordonnées du point de contrôle 1 ; Paramètres 3 et 4 : coordonnées du point de contrôle 2 ; Paramètre 4 : rayon de l'arc ctx.arcTo(200, 50, 200, 200, 100); ctx.lineTo(200, 200) ctx.stroke(); ctx.beginPath(); ctx.rect(50, 50, 10, 10); ctx.rect(200, 50, 10, 10) ctx.rect(200, 200, 10, 10) ctx.fill() } draw();

arcToDescription de la méthode :

Cette méthode peut être comprise comme suit. L'arc à tracer est déterminé par deux droites tangentes.

La première droite tangente : la droite déterminée par le point de départ et le point de contrôle 1.

La deuxième droite tangente : la droite déterminée par le point de contrôle 1 et le point de contrôle 2.

En fait, l'arc tracé est l'arc tangent à ces deux droites.

4.5 Tracé des courbes de Bézier

4.5.1 Qu'est-ce qu'une courbe de Bézier

Une courbe de Bézier, également appelée courbe Bezier, est une courbe mathématique utilisée dans les applications graphiques bidimensionnelles.

Les logiciels de graphiques vectoriels généraux l'utilisent pour dessiner avec précision des courbes. Une courbe de Bézier est constituée de segments de droite et de nœuds. Les nœuds sont des points d'appui déplaçables, et les segments de droite sont comme des élastiques étirables. L'outil plume que l'on voit dans les outils de dessin sert à créer de telles courbes vectorielles.

Les courbes de Bézier sont des courbes paramétriques assez importantes en infographie. Certains logiciels bitmap matures disposent aussi d'outils de courbe de Bézier, comme PhotoShop. Dans Flash4, il n'y avait pas d'outil de courbe complet, mais Flash5 fournissait déjà un outil de courbe de Bézier.

La courbe de Bézier a été largement publiée en 1962 par l'ingénieur français Pierre Bézier, qui l'a utilisée pour concevoir des carrosseries automobiles. La courbe de Bézier a été initialement développée par Paul de Casteljau en 1959 à l'aide de l'algorithme de Casteljau, une méthode numériquement stable pour trouver les courbes de Bézier.

Une courbe de Bézier du premier ordre est en fait une ligne droite.

Courbe de Bézier quadratique

Courbe de Bézier cubique

4.5.2 Tracé des courbes de Bézier

Tracer une courbe de Bézier quadratique :

quadraticCurveTo(cp1x, cp1y, x, y)

Description:

Paramètres 1 et 2 : coordonnées du point de contrôle
Paramètres 3 et 4 : coordonnées du point d'extrémité

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(10, 200); //Point de départ var cp1x = 40, cp1y = 100; //Point de contrôle var x = 200, y = 200; //Point d'arrivée //Dessiner une courbe de Bézier quadratique ctx.quadraticCurveTo(cp1x, cp1y, x, y); ctx.stroke(); ctx.beginPath(); ctx.rect(10, 200, 10, 10); ctx.rect(cp1x, cp1y, 10, 10); ctx.rect(x, y, 10, 10); ctx.fill(); } draw();

Tracez une courbe de Bézier cubique :

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Description:

Paramètres 1 et 2 : coordonnées du point de contrôle 1
Paramètres 3 et 4 : coordonnées du point de contrôle 2
Paramètres 5 et 6 : coordonnées du point d'arrivée

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(40, 200); //Point de départ var cp1x = 20, cp1y = 100; //Point de contrôle 1 var cp2x = 100, cp2y = 120; //Point de contrôle 2 var x = 200, y = 200; //Point d'arrivée //Dessiner une courbe de Bézier quadratique ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); ctx.stroke(); ctx.beginPath(); ctx.rect(40, 200, 10, 10); ctx.rect(cp1x, cp1y, 10, 10); ctx.rect(cp2x, cp2y, 10, 10); ctx.rect(x, y, 10, 10); ctx.fill(); } draw();

5. Ajout de styles et de couleurs

Dans le chapitre précédent sur le dessin de rectangles, seules les lignes et couleurs par défaut ont été utilisées.

Si vous souhaitez colorer une forme, deux propriétés importantes peuvent le faire.

fillStyle = colorDéfinissez la couleur de remplissage de la forme.
strokeStyle = colorDéfinissez la couleur du contour de la forme.

Notes :

1. la couleur peut être une chaîne représentant une valeur de couleur CSS, un objet gradient ou un objet pattern.
2. Par défaut, les couleurs de ligne et de remplissage sont toutes les deux noires.
3. Une fois que vous avez défini la valeur de strokeStyle ou fillStyle, cette nouvelle valeur devient la valeur par défaut pour les formes nouvellement dessinées. Si vous souhaitez donner une couleur différente à chaque forme, vous devez réinitialiser la valeur de fillStyle ou strokeStyle.

fillStyle

strokeStyle

Transparence

globalAlpha = transparencyValue: Cette propriété affecte la transparence de toutes les formes dans le canvas. Les valeurs valides vont de 0.0 (entièrement transparent) à 1.0 (entièrement opaque), la valeur par défaut est 1.0.

globalAlphaCette propriété est assez efficace lorsque vous devez dessiner de nombreuses formes avec la même transparence. Cependant, je pense qu'il est préférable d'utiliser rgba() pour définir la transparence.

1、style de ligne

Largeur de ligne. Elle ne peut être qu'une valeur positive. La valeur par défaut est 1.0.

La ligne reliant le point de départ et le point d'arrivée est le centre,Le haut et le bas occupent chacun la moitié de la largeur de ligne.。

ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(100, 10); ctx.lineWidth = 10; ctx.stroke(); ctx.beginPath(); ctx.moveTo(110, 10); ctx.lineTo(160, 10) ctx.lineWidth = 20; ctx.stroke()

2. lineCap = type

Style d'extrémité de ligne.

Il y a 3 valeurs :

butt: L'extrémité du segment de ligne se termine par un carré.
round: L'extrémité du segment de ligne se termine par un cercle.
square: L'extrémité du segment de ligne se termine par un carré, mais une zone rectangulaire est ajoutée, dont la largeur est la même que le segment de ligne et dont la hauteur est la moitié de l'épaisseur de la ligne.

var lineCaps = ["butt", "round", "square"]; for (var i = 0; i < 3; i++){ ctx.beginPath(); ctx.moveTo(20 + 30 * i, 30); ctx.lineTo(20 + 30 * i, 100); ctx.lineWidth = 20; ctx.lineCap = lineCaps[i]; ctx.stroke(); } ctx.beginPath(); ctx.moveTo(0, 30); ctx.lineTo(300, 30); ctx.moveTo(0, 100); ctx.lineTo(300, 100) ctx.strokeStyle = "red"; ctx.lineWidth = 1; ctx.stroke();

3. lineJoin = type

Dans le même chemin, définissez le style des jointures entre les lignes.

Il y a 3 valeurs.round, beveletmiter：
1. roundDessinez la forme du coin en remplissant un secteur supplémentaire dont le centre se trouve à l'extrémité de la partie connectée. Le rayon du coin arrondi correspond à la largeur du segment de ligne.
2. bevelRemplissez une zone supplémentaire à base triangulaire à l'extrémité de la partie connectée ; chaque partie a son propre coin rectangulaire indépendant.
3. miter(Par défaut) Prolongez les bords extérieurs des parties connectées afin qu'ils se croisent en un point, formant une zone supplémentaire en forme de losange.
  
  function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); var lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 20; for (var i = 0; i < lineJoin.length; i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(50, 50 + i * 50); ctx.lineTo(100, 100 + i * 50); ctx.lineTo(150, 50 + i * 50); ctx.lineTo(200, 100 + i * 50); ctx.lineTo(250, 50 + i * 50); ctx.stroke(); } } draw();

Apprendre le Canvas HTML5 : un seul article suffit

Catégorie Technologie de programmation

1. Introduction au Canvas

2. Utilisation de base de Canvas

2.1 <canvas>Élément

2.2 Contexte de rendu (Le contexte de rendu)

2.3 Vérification de la prise en charge

2.4 Modèle de code

Exemple

2.5 Un exemple simple

Exemple

3. Dessiner des formes

3.1 Grille(grid)et l'espace de coordonnées

3.2 Dessin de rectangles

4. Dessin de chemins (path)

4.1 Dessin de segments de ligne

4.2 Dessiner une bordure de triangle

4.3 Remplir un triangle

4.4 Dessiner des arcs

Exemple d'arc 1

Exemple d'arc 2

Exemple d'arc 3

4.5 Tracé des courbes de Bézier

5. Ajout de styles et de couleurs

fillStyle

strokeStyle

Transparence

1、style de ligne

2. lineCap = type

3. lineJoin = type

4. Lignes pointillées

6. Dessin de texte

Deux méthodes pour dessiner du texte

Ajout de styles au texte

7. Dessin d'images

7.1 Création d'une image à partir de zéro

7.2 DessinimgImages dans l'élément de balise

7.3 Mise à l'échelle des images

7.4 Découpage (slice)

8. Sauvegarde et restauration de l'état

9. Transformations

9.1 translate

9.2 rotate

9.3 scale

9.4 transform (matrice de transformation)

10. Composition

3. source-out

4. source-atop

5. destination-over

6. destination-in

7. destination-out

8. destination-atop

9. lighter

10. darken

11. lighten

12. xor

13. copy

11. Tracés de découpe

12. Animation

Étapes de base de l'animation

Contrôler l'animation

Cas 1 : Système solaire

Cas 2 : Horloge analogique

2.1 `<canvas>`Élément

3.1 Grille`(grid)`et l'espace de coordonnées

4. Dessin de chemins (`path`)

7.2 Dessin`img`Images dans l'élément de balise