Pour apprendre le canevas, vous devez d'abord savoir comment dessiner des segments de ligne, puis vous pouvez utiliser de nombreux segments de ligne simples pour réaliser des graphiques plus complexes. Par exemple, les graphiques courants, les graphiques à barres, les graphiques en courbes, etc. sont tous réalisés à travers des segments de ligne.
connaissances de baseLa connaissance de base du canevas n'est pas grande. Je sais principalement dessiner des segments de lignes, des graphiques, des images, du texte, etc. Le canevas peut être dessiné dans le navigateur, ou des images simples peuvent être dessinées sur le serveur de nœuds à l'aide de node-canvas. Cet article enregistre uniquement le dessin dans le navigateur. Quant à la façon de dessiner côté nœud, vous pouvez vérifier vous-même les informations pertinentes.
Pour dessiner dans le navigateur, définissez d'abord l'élément canevas en HTML. La largeur et la hauteur par défaut sont 300 * 150, qui peuvent être définies par width et height . Notez que la largeur et la hauteur du style d'élément de canevas et la largeur et la hauteur du canevas de dessin ne sont pas la même chose.
<canvas id=canvas> <p>Le navigateur actuel ne prend pas en charge Canvas, veuillez mettre à jour votre navigateur</p></canvas>
Avant de dessiner, il faut d'abord obtenir le contexte de dessin 2D du canevas actuel, puis dessiner en exploitant le contexte.
let canvas = document.querySelector('#canvas');if (!canvas) { throw new Error('impossible de trouver l'élément de toile');}// Remarque 2d Les paramètres doivent être en minuscules ; // En définissant les paramètres. sur webgl, vous pouvez obtenir le contexte de dessin 3D let ctx = canvas.getContext('2d'); Remarque : L'extrait de code ci-dessus sera ignoré dans les exemples suivants et ctx sera utilisée directement pour représenter le contexte de dessin 2D du canevas.
Jetons un coup d'œil au système de coordonnées dans le dessin 2D du canevas. Le coin supérieur gauche de l'élément de canevas actuel est l'origine des coordonnées (0,0), la direction horizontale vers la droite est la direction positive de l'axe X et le la direction verticale vers le bas est la direction positive de l’axe Y, comme indiqué ci-dessous. Vous pouvez utiliser le système de coordonnées par translation, rotation et mise à l'échelle pour réaliser certaines animations. Cette partie sera expliquée en détail dans la section Connaissances en animation.
segment de ligne Lorsque vous dessinez un segment de ligne simple, vous définissez généralement d'abord le style du segment de ligne, tel que la couleur, la largeur de ligne, le style de point d'extrémité de ligne, etc. Nous définissons le style de dessin global de ctx en définissant strokeStyle , qui peut être rgba ou hexadécimal légal. valeur de couleur, ou objet dégradé, etc. Le code suivant dessine simplement un segment de ligne rouge d'une largeur de 10 de (10,10) à (50,60).
ctx.StrokeStyle = 'red';ctx.lineWidth = 10;ctx.moveTo(10, 10);ctx.lineTo(50, 60);ctx.Stroke();
Examinons d'abord les méthodes et propriétés liées au dessin de segments de ligne.
Propriétés associées :
Méthodes associées :
Essayez de définir différentes valeurs lineCap pour dessiner le même segment de ligne
ctx.lineWidth = 10;ctx.textAlign = 'center';let colours = ['red', 'green', 'blue'];let lineCaps = ['butt', 'round', 'square'];for ( let [index, lc] of lineCaps.entries()) { ctx.StrokeStyle = colours[index]; //Définit la couleur du segment de ligne ctx.lineCap = lc //Définit lineCap; ctx.beginPath(); // Efface le chemin actuel ctx.moveTo(10, 20 + 20 * index); ctx.lineTo(50, 20 + 20 * index); ctx.fillText(lc, 80 , 25 + 20 * indice);} Comme le montrent les résultats de la figure ci-dessus, lorsque lineCap est défini sur arrondi et carré, les extrémités d'une certaine longueur seront ajoutées aux deux extrémités du segment de ligne d'origine, sauf que round est un style d'arc et square est un style rectangulaire. style. Une chose à noter est qu'un seul chemin actuel peut exister en même temps dans le contexte de dessin du canevas. Afin de dessiner différents segments de ligne, beginPath() doit être appelé avant chaque dessin pour effacer l'itinéraire actuel et démarrer un nouveau chemin.
Essayons d'utiliser différentes valeurs lineJoin pour dessiner les styles au centre des deux segments de ligne.
ctx.lineWidth = 20;ctx.textAlign = 'center';ctx.lineCap = 'butt';let couleurs = ['rouge', 'vert', 'bleu'];let lineJoins = ['biseau', 'rond' , 'miter'];for (let [index, lj] de lineJoins.entries()) { ctx.StrokeStyle = couleurs[index]; //Définit la couleur du segment de ligne ctx.lineJoin = lj; //Définit lineJoin ctx.beginPath(); //Efface le chemin actuel ctx.moveTo(10 + 80 * index, 20); 80 * index, 20); ctx.lineTo(50 + 80 * index, 60); ctx.fillText(lj, 40 + 80 * index, 80);} On peut voir que les trois types lineJoin sont différents dans le traitement du focus des deux segments de ligne. Parmi eux, lors de la définition lineJoin=miter , le rapport maximum entre la longueur de la ligne d'onglet et la moitié de la largeur de la ligne peut être défini en définissant l'attribut miterLimit . Lorsque ce rapport est dépassé, lineJoin adoptera la méthode de biseau.
Canvas peut non seulement tracer des lignes pleines, mais aussi des lignes pointillées. Tracez une ligne pointillée en définissant la propriété lineDashOffset et en appelant setLineDash() .
ctx.lineWidth = 10;ctx.textAlign = 'center';ctx.setLineDash([8, 8]); //Représente 8 pixels dans la partie ligne continue et 8 pixels dans la partie espace soit couleurs = ['rouge', 'green ', 'blue'];let lineDashOffsets = [1, 2, 4];for (let [index, ldOffset] de lineDashOffsets.entries()) { ctx.strokeStyle = colours[index]; //Couleur du segment de ligne ctx.lineDashOffset = ldOffset; //Le décalage est défini ctx.beginPath(); ctx.moveTo(10, 20 + 20 * index); 100, 20 + 20 * index ctx.AVC(); ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * index);} Comme vous pouvez le voir sur l'image, lineDashOffset est le décalage défini pour commencer à dessiner la ligne pointillée. La méthode setLineDash() accepte un paramètre de tableau si le nombre de tableaux est un nombre impair, elle copiera par défaut l'élément actuel du tableau pour en faire un nombre pair. A partir du 0ème élément, il représente la longueur de la partie en trait plein, le 1er élément représente la longueur de la partie de gap, le 2ème élément représente la longueur de la partie en trait plein, le 3ème élément représente la longueur de la partie de gap, si il atteint le dernier élément du tableau, il recommencera à zéro, et ainsi de suite.
ctx.lineWidth = 10;ctx.textAlign = 'center';let couleurs = ['rouge', 'vert', 'bleu', 'gris'];let lineDashes = [[20, 20], [40, 40] , [20, 40], [20, 40, 20]];for (let [index, ld] of lineDashes.entries()) { ctx.StrokeStyle = couleurs[index]; //Définir la couleur ctx.setLineDash(ld); //Définir lineDash ctx.beginPath(); + 20 * index); ctx.AVC(); ctx.fillText(`lineDashes:[${ld}]`, 240, 25 + 20 * indice);} let lineDashOffset = 0; //Initial lineDashOffsetctx.StrokeStyle = 'green';function animate() { if (lineDashOffset > 25) { lineDashOffset = 0; } ctx.clearRect(0, 0, width, height); canevas actuel ctx.lineDashOffset = -lineDashOffset; //Définir lineDashOffset ctx.setLineDash([4, 4]); //Définir la longueur de la ligne continue et la longueur de l'espace ctx.rect(20, 20, 100, 100); //Dessiner un rectangle ctx.stroke(); //Ajoute le chemin actuel au canevas Stroke lineDashOffset += 1; //lineDashOffset offset plus 1 window.requestAnimationFrame(animate); //Utilise la fréquence d'images du navigateur pour exécuter à plusieurs reprises la fonction d'animation}animate(); résumé Lorsque vous dessinez un segment de ligne, vous devez comprendre le concept du chemin actuel du canevas. À un certain moment, il n'y a qu'un seul chemin actuel dans le canevas. Lors du démarrage d'un nouveau chemin, beginPath() doit être appelé. Vous pouvez définir le style de dessin des segments de ligne en définissant lineWidth , lineCap et lineJoin . Lorsque vous tracez un segment de ligne, vous pouvez définir la couleur du segment de ligne via strokeStyle .
Non seulement des lignes continues peuvent être dessinées dans le canevas, mais également des lignes pointillées peuvent être tracées via lineDashOffset et setLineDash() .
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.