Quels sont les points clés de l'apprentissage du canevas ?

Quels sont les éléments clés pour bien apprendre la toile ? , besoin d'exemples de code spécifiques

Canvas est une fonctionnalité importante du HTML5. Il peut obtenir divers effets de dessin intéressants et peut également être utilisé comme base pour le développement de jeux. Cependant, bien apprendre Canvas nécessite de maîtriser certains éléments clés. Ces éléments et exemples de code spécifiques seront présentés ci-dessous.

1. Le concept de base et l'utilisation de Canvas

Canvas est un élément HTML qui crée un canevas dans une page Web. Vous pouvez dessiner diverses formes, textes, images, etc. Canvas dispose de deux modes : 2D et 3D. Ici, nous parlons principalement du mode 2D.

Pour utiliser Canvas, vous devez d'abord créer un élément Canvas dans la page HTML. Le code est le suivant :

<canvas id="myCanvas" width="800" height="600"></canvas>

Dans le code ci-dessus, l'attribut id "myCanvas" signifie qu'il s'agit d'un élément Canvas avec l'ID "myCanvas", et les attributs width et height représentent respectivement la largeur et la hauteur du canevas.

Vous pouvez obtenir l'élément Canvas et effectuer des opérations de dessin via du code JavaScript. Le code est le suivant :

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

La première ligne de code obtient l'élément Canvas, et la deuxième ligne de code obtient le contexte de rendu (contexte). Le mode 2D (écrit "2d") est utilisé ici. les attributs et les méthodes sont :

• fillStyle : couleur de remplissage
• StrokeStyle : couleur de trait
• lineWidth : largeur de ligne
• beginPath : démarrer un nouveau chemin
• closePath : fermer le chemin actuel
• moveTo : déplacer le chemin vers le chemin spécifié point
• lineTo : ajoutez un nouveau point, puis créez une ligne de ce point au dernier point spécifié
• fill : remplissez le chemin actuel
• Stroke : dessinez la bordure du chemin actuel

Ce qui suit est un exemple simple code pour dessiner un rectangle :

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

Dans le code ci-dessus, l'attribut fillStyle est défini. La couleur de remplissage est "rouge", et la méthode fillRect est utilisée pour dessiner un rectangle. Les deux premiers paramètres sont les coordonnées du coin supérieur gauche. , et les deux derniers paramètres sont la largeur et la hauteur du rectangle.

2. Transformation graphique de Canvas

Dans Canvas, les graphiques peuvent être transformés tels que la translation, la rotation, la mise à l'échelle, etc. Ces transformations peuvent être réalisées grâce à la méthode de transformation. Le paramètre de la méthode de transformation est une matrice de transformation. Seules les méthodes de transformation courantes sont présentées ici.

1. Transformation de traduction

La transformation de traduction peut être implémentée via la méthode de traduction. L'exemple de code est le suivant :

ctx.translate(100, 100);
ctx.fillRect(0, 0, 100, 100);

Dans le code ci-dessus, la méthode de traduction déplace l'origine du dessin, de sorte que la position du rectangle est décalée vers le coin inférieur droit de 100 pixels.

2. Transformation de rotation

La transformation de rotation peut être implémentée via la méthode de rotation. L'exemple de code est le suivant :

ctx.translate(100, 100);
ctx.rotate(Math.PI / 4); // 旋转45度
ctx.fillRect(0, 0, 100, 100);

Dans le code ci-dessus, la transformation de rotation utilise la méthode de rotation. Le paramètre est la valeur en radian de la rotation. Ici, la rotation est de 45 degrés (soit π/ 4 radians). Notez que la transformation de rotation doit être effectuée après la transformation de translation, sinon le centre de rotation sera décalé.

3. Transformation d'échelle

La transformation d'échelle peut être implémentée via la méthode d'échelle. L'exemple de code est le suivant :

ctx.translate(50, 50);
ctx.scale(2, 2); // 宽度和高度都放大了2倍
ctx.fillRect(0, 0, 50, 50);

Dans le code ci-dessus, la transformation d'échelle utilise la méthode d'échelle. la largeur et la hauteur sont agrandies de 2 fois. Notez que la transformation de mise à l'échelle doit également être effectuée après la transformation de traduction.

3. Traitement des événements Canvas

Canvas peut répondre à divers événements, tels que les clics de souris, les mouvements de la souris, les touches du clavier, etc. Ces événements sont liés via la méthode addEventListener. L'exemple de code est le suivant :

canvas.addEventListener("mousedown", function (e) {
  var x = e.clientX - canvas.getBoundingClientRect().left;
  var y = e.clientY - canvas.getBoundingClientRect().top;
  console.log("x:" + x + ", y:" + y);
});

Dans le code ci-dessus, la méthode addEventListener lie l'événement mousedown lorsque la souris est enfoncée, les coordonnées de la souris par rapport au coin supérieur gauche de. l'élément Canvas est imprimé (l'élément Canvas doit être soustrait (coordonnées du coin supérieur gauche).

4. Effets d'animation sur toile

Canvas peut obtenir divers effets d'animation, tels que le mouvement, la mise à l'échelle, la rotation, etc., qui doivent être obtenus à l'aide de la méthode requestAnimationFrame.

La méthode requestAnimationFrame peut appeler la fonction spécifiée avant que le navigateur ne se redessine la prochaine fois, ce qui peut rendre l'effet d'animation plus fluide. La méthode requestAnimationFrame a un paramètre de fonction de rappel. La fonction de rappel sera appelée lors du prochain redessin et l'effet d'animation peut être implémenté dans la fonction de rappel.

L'exemple de code est le suivant :

var xpos = 50;
var ypos = 50;
var xspeed = 5;
var yspeed = 5;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(xpos, ypos, 50, 50);
  xpos += xspeed;
  ypos += yspeed;
  if (xpos < 0 || xpos > canvas.width - 50) {
    xspeed = -xspeed;
  }
  if (ypos < 0 || ypos > canvas.height - 50) {
    yspeed = -yspeed;
  }
  requestAnimationFrame(draw);
}

draw();

Dans le code ci-dessus, la fonction de dessin est appelée dans chaque image et l'effet d'animation d'un rectangle en mouvement est implémenté dans cette fonction.

Résumé

Pour bien apprendre Canvas, vous devez maîtriser les concepts de base et l'utilisation de Canvas, la transformation graphique, le traitement des événements, les effets d'animation et d'autres éléments clés. Cet article présente ces éléments et fournit des exemples de code spécifiques, dans l'espoir de vous aider à bien apprendre Canvas.

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!