Révéler les secrets des propriétés du canevas

Pour explorer les secrets de l'attribut canvas, des exemples de code spécifiques sont nécessaires

Canvas est un outil de dessin graphique très puissant en HTML5, grâce auquel nous pouvons facilement dessiner des graphiques complexes, des effets dynamiques, des jeux, etc. dans des pages Web . Cependant, pour l'utiliser, nous devons être familiers avec les propriétés et méthodes associées de Canvas et maîtriser comment les utiliser. Dans cet article, nous explorerons certaines des propriétés principales de Canvas et fournirons des exemples de code spécifiques pour aider les lecteurs à mieux comprendre comment ces propriétés doivent être utilisées.

1. Attributs du canevas

1. largeur et hauteur

Les attributs de largeur et de hauteur de l'élément Canvas déterminent la taille de la surface de dessin. Les deux propriétés sont par défaut 300 et vous pouvez modifier la taille du canevas en les définissant. Il convient de noter que la définition de ces deux propriétés entraînera l'effacement du contenu du canevas.

Exemple de code :

<canvas id="myCanvas" width="500" height="500"></canvas>

2. getContext()

getContext() est l'une des méthodes principales de Canvas, qui renvoie un objet qui fournit diverses méthodes et propriétés pour dessiner sur Canvas. Cette méthode n'a qu'un seul paramètre, qui spécifie le type de contexte (2d, webgl, etc.).

Exemple de code :

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

3. attribut style

L'attribut style est utilisé pour définir le style de l'élément Canvas, y compris la couleur d'arrière-plan, le style de bordure, la largeur, etc. Il est à noter que cette propriété n'affecte pas le contenu dessiné.

Exemple de code :

<canvas id="myCanvas" width="500" height="500" style="background-color: #f2f2f2; border: 1px solid #000;"></canvas>

2. Propriétés du dessin

1. fillStyle et StrokeStyle

La propriété fillStyle est utilisée pour définir la couleur de remplissage et la propriété StrokeStyle est utilisée pour définir la couleur de la ligne.

Exemple de code :

ctx.fillStyle = "#FF0000";
ctx.strokeSytle = "#000000";

2. lineWidth

La propriété lineWidth est utilisée pour définir la largeur de la ligne.

Exemple de code :

ctx.lineWidth = 5;

3. lineCap et lineJoin

La propriété lineCap est utilisée pour définir le style des extrémités de ligne. Il existe trois valeurs facultatives : bout à bout (tête plate), rond (tête ronde) et carré (carré). tête). L'attribut lineJoin est utilisé pour définir le style des intersections de lignes. Il a trois valeurs facultatives : miter (miter), round (connexion ronde) et biseau (direct).

Exemple de code :

ctx.lineCap = "round";
ctx.lineJoin = "round";

3. Méthodes de dessin

1. fillRect et StrokeRect

La méthode fillRect est utilisée pour dessiner un rectangle rempli et la méthode StrokeRect est utilisée pour dessiner un rectangle creux.

Exemple de code :

ctx.fillRect(50, 50, 100, 100);
ctx.strokeRect(50, 50, 100, 100);

2. fillText et StrokeText

La méthode fillText est utilisée pour dessiner du texte rempli et la méthode StrokeText est utilisée pour dessiner du texte creux.

Exemple de code :

ctx.font = "30px Arial";
ctx.fillStyle = "#000000";
ctx.fillText("Hello World!", 100, 100);
ctx.strokeStyle = "#FF0000";
ctx.strokeText("Hello World!", 100, 100);

3. beginPath, moveTo, lineTo, arc et closePath

La combinaison de ces méthodes peut dessiner n'importe quel graphique complexe. La méthode beginPath est utilisée pour commencer à tracer un chemin, la méthode moveTo est utilisée pour déplacer le pinceau vers les coordonnées spécifiées, la méthode lineTo est utilisée pour tracer une ligne droite basée sur les coordonnées, la méthode arc est utilisée pour dessiner un arc, et la méthode closePath est utilisée pour terminer le chemin.

Exemples de code :

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.arc(100, 200, 50, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fillStyle = "#FF0000";
ctx.fill();

IV. Résumé

Grâce à l'introduction de cet article, les lecteurs devraient déjà avoir une compréhension plus approfondie de certaines propriétés fondamentales de Canvas et être capables de les utiliser pour dessiner habilement à travers des exemples de code. Bien sûr, ce n’est que la pointe de l’iceberg de Canvas. Lors de son utilisation future, nous devons encore continuer à apprendre, à explorer et à pratiquer pour mieux utiliser sa puissance.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!