HTML5 Les chemins du canevas

HTML5 Les chemins du canevas sont utilisés pour5Il est possible de dessiner plusieurs types de formes (lignes, cercles, polygones, etc.) sur le canevas, et les chemins sont utilisés pour5Il est possible de dessiner plusieurs types de formes sur le canevas

HTML5 Les chemins du canevas sont une série de points, entre lesquels se trouvent des instructions de dessin. Par exemple, une série de points peut être dessinée en ligne droite, ou il peut y avoir une courbe entre eux.

Les chemins sont utilisés pour5Il est important de comprendre ce concept central, car il permet de dessiner plusieurs types de formes (lignes, cercles, polygones, etc.) sur le canevas.

commencer et terminer un chemin - Chemin

Utilisez2La fonction contexte D beginPath() et peut commencer et terminer un chemin.closePath() comme suit :

var canvas = document.getElementById("ex1);
var context = canvas.getContext("2d");context.beginPath();
//　...opérations de dessin de chemin
context.closePath();

moveTo()

Lorsque vous dessinez un chemin, vous utilisez une brosse virtuelle ou un pointeur. Ce pointeur est toujours à un certain point. Utilisez2La fonction Context D effectue le déplacement du pointeur virtuel moveTo(x, y), comme suit :

context.moveTo(10,10);

Dans cet exemple, le pointeur est déplacé vers le point10,10.

lineTo()

C'est un exemple :

context.beginPath();
context.moveTo(10,10);
context.lineTo(50,50);
context.closePath();

La fonction lineTo() trace une ligne de la position du pointeur virtuel à l'endroit où la fonction est appelée en tant que paramètre.10,10Dans cet exemple, le pointeur est déplacé vers le point5, puis trace une ligne de ce point à50,

0.50,5La fonction lineTo() déplace également le pointeur virtuel à la fin de cette ligne. Par conséquent, dans l'exemple ci-dessus, le pointeur se déplace vers

0, en indiquant au canevas de dessiner une ligne à ce point. + stroke()

fill()2dans le point que vous indiquez2Le contexte D stroke() ou fill() ne dessine aucune ligne avant de dessiner le chemin. En appelant2Cette opération est terminée sur le contexte D.
La fonction stroke() dessine le contour de la forme définie par les opérations de chemin.
La fonction fill() remplit la forme définie par les opérations de chemin.
Voici un exemple des deux, stroke() et fill() appliqués à la même forme :

<canvas id="ex1" width="500" height="75" style="border:　1px solide #cccccc;">
HTML5　Canvas non pris en charge
</canvas>
<script>
var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();</script>

Voici le résultat de l'exécution du code ci-dessus :

LineWidth

Vous pouvez utiliser lineWidth 2L'attribut de contexte définit diverses fonctions de brosse pour la largeur des lignes dessinées. Voici un exemple :

context.lineWidth =　10;

Les exemples ci-dessus définissent la largeur de ligne pour toutes les opérations de dessin ultérieures.10pixels.
Voici trois lignes, avec des largeurs de ligne respectives de1,5et10:

La largeur de ligne est supérieure à1lorsque, la largeur supplémentaire de la ligne est dessinée en dehors de la ligne centrale. Autrement dit, si vous partez de10,10à100,10Tracez une ligne de largeur10, alors la ligne en réalité partir de10,5Commence et s'étend jusqu'à10,15, puis s'étend horizontalement jusqu'à100,5et100,15Comme un rectangle.

Casque (lineCap)

Lorsque vous dessinez une ligne avec un chemin, vous pouvez définir la ligne de casque. Le casque définit la manière dont la fin de la ligne est dessinée.
La largeur de ligne est définie par lineCap2L'attribut lineCap du contexte D peut être configuré. Il peut prendre les valeurs suivantes:

• butt

• round

• square

Cette valeur butt entraîne un bout de ligne plat et perpendiculaire à la ligne.
Cette valeur round produit un bout de ligne arrondi avec un rayon égal à la moitié de la largeur de ligne.
Cette valeur square entraîne le dessin d'un rectangle à la fin de la ligne. La taille du rectangle est largeur de ligne x largeur de ligne / 2.
Voici un ensemble d'exemples illustrant les lignes de casque. La largeur de toutes les lignes est10. La ligne la plus à gauche utilise la valeur lineCap butt. La ligne au milieu utilise la valeur lineCap round. La ligne la plus à droite utilise la valeur lineCap square

La valeur lineCap butt et square peuvent être un peu difficiles à voir la différence entre les lignes tracées. Par conséquent, j'ai créé quelques exemples de lignes utilisant butt et square qui sont dessinées côte à côte pour que vous puissiez voir la différence. En haut ou à gauche, utilisez butt, en bas ou à droite, utilisez square.

Comme vous pouvez le voir, l'utilisation de la valeur lineCap square ajoute un rectangle supplémentaire à la fin de la ligne, ce qui rend la ligne un peu plus longue.

Connexion des lignes (lineJoin)

lineJoin 2L'attribut lineJoin du contexte D définit comment dessiner les points de connexion entre deux lignes. Le point de connexion entre deux lignes est appelé "connexion des lignes". L'attribut lineJoin peut avoir les valeurs suivantes:

• miter

• bevel

• round

Voici trois exemples de code pour définir la connexion des lignes:

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

La valeur du résultat miter entraîne le dessin d'angles droits pour la connexion des lignes.
La valeur du résultat bevel entraîne le dessin d'angles droits (droits) pour la connexion des lignes.
La valeur du résultat round entraîne le dessin d'angles arrondis pour la connexion des lignes.
Voici trois exemples (de gauche à droite) de miter, bevel et round utilisés comme valeurs de l'attribut lineJoin.

arc()

2La fonction arc() du contexte D dessine un arc de cercle sur le canevas.

La fonction arc() utilise6paramètres:

• x: Coordonnée x du point central de l'arc

• y: Coordonnée y du point central de l'arc

• radius: Rayon de l'arc

• startAngle: Angle en radians de début de l'arc

• endAngle: Angle en radians de la fin de l'arc

• anticlockwise: Définir si l'orientation d'insertion est dans le sens inverse des aiguilles d'une montre (et non dans le sens des aiguilles d'une montre).

C'est un exemple de code:

context.lineWidth =　3;
var x =　50;
var y =　50;
var radius =　25;
var startAngle = (Math.PI　/　180)　*　45;
var endAngle = (Math.PI　/　180)　*　90;
var anticlockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.stroke();
context.closePath();

Cet exemple de code dessine un arc de cercle, le centre duquel est50,50, de rayon25pixels, à partir de45degrés s'étendent jusqu'à180 degrés. Vous pourriez avoir remarqué que, à partir de 0 degrés,36Les degrés de 0 seront convertis en radians.
Voici à quoi ressemble l'exemple de code dessiné sur le canevas:

C'est le même exemple de code, mais anticlockwise est configuré à true:

Pour dessiner un cercle complet, il suffit de configurer startAngle à 0 et endAngle à2 * Math.PI est égal à (Math.PI / 180) * 360

arcTo()

2Le contexte D a unarcTo()fonction, mais elle peut être utiliséelineTo()etpour imiter sa fonctionarc()par conséquent, je vais le sauter

quadraticCurveTo()

La fonction quadraticCurveTo() dessine une courbe de Bézier quadratique d'un point à un autre. Cette courbe est contrôlée par un seul point de contrôle. C'est un exemple de code:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　100;
var toY =　50;
var cpX =　75;
var cpY =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.quadraticCurveTo(cpX, cpY, toX, toY);
context.stroke();
context.closePath();

Cet exemple de code utilise des points de contrôle75,100 (cpX, cpY) dessine une ligne de50,50 à100,5La courbe de zéro. Le résultat de la courbe est comme suit:

Les petits points sur le canevas sont les points de contrôle que j'ai dessinés ici. Ils ne font généralement pas partie de la courbe.

bezierCurveTo()

La fonction bezierCurveTo() dessine une courbe de Bézier cubique d'un point à un autre. La courbe de Bézier cubique a2un point de contrôle, tandis que la courbe de Bézier quadratique n'a que1un point de contrôle. C'est un exemple de code:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　100;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Cet exemple de code utilise des points de contrôle100,100 (cp1X, cp1Y) et250,100 (cp2X, cp2Y) dessiner à partir de50,50 à300,5La courbe de zéro. Le résultat de la courbe est comme suit:

Les deux petits points sur le canevas sont les points de contrôle que j'ai dessinés, utilisés pour vous montrer leur position. Ils ne sont pas dessinés comme une partie de la courbe.
Voici un exemple utilisant des points de départ, d'arrivée et de contrôle différents:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　10;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Voici la courbe correspondante:

De même, deux points sont mes points de contrôle de rendu explicites