Maîtriser les connaissances de base de la toile : tout ce qu'il faut savoir

Canvas est une nouvelle balise HTML5 qui permet de dessiner avec JavaScript. En utilisant Canvas, nous pouvons dessiner des graphiques, créer des animations, traiter des images et obtenir des effets interactifs sur des pages Web. Cet article présentera les connaissances de base de Canvas, notamment comment créer des éléments Canvas, dessiner des formes et des chemins de base, dessiner du texte, utiliser des images, etc., et fournira des exemples de code détaillés.

1. Créer un élément Canvas
   Pour utiliser Canvas dans une page Web, vous devez d'abord créer un élément Canvas. Un élément Canvas peut être créé à l'aide du code HTML comme indiqué ci-dessous :

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

   Dans le code ci-dessus, nous avons créé un élément Canvas avec l'identifiant "myCanvas" avec une largeur et une hauteur de 500 pixels. Sa taille et sa position peuvent être définies via CSS.

2. Obtenir le contexte de dessin
   Après avoir créé l'élément Canvas, nous devons obtenir le contexte de dessin avant de pouvoir effectuer des opérations de dessin. L'élément Canvas fournit une méthode getContext() pour obtenir le contexte de dessin, comme indiqué ci-dessous :

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

   Dans le code ci-dessus, utilisez d'abord la méthode getElementById() pour obtenir l'élément Canvas avec l'identifiant "myCanvas", puis utilisez getContext ("2d") obtient le contexte de dessin 2D. Canvas prend également en charge webgl, webgl2 et d'autres contextes de dessin. Ici, nous introduisons principalement le dessin 2D.

3. Dessiner des formes et des chemins de base
   Canvas fournit des méthodes pour dessiner des formes et des chemins de base, tels que des rectangles, des cercles, des lignes, etc. Voici quelques méthodes couramment utilisées et leurs exemples de codes :

• Dessiner un rectangle :

  ctx.fillStyle = "red"; // 设置填充颜色
  ctx.fillRect(50, 50, 100, 100); // 绘制矩形

  Dans le code ci-dessus, nous utilisons d'abord la propriété fillStyle pour définir la couleur de remplissage sur rouge, puis utilisons la méthode fillRect(). dessiner un rectangle avec les coordonnées du coin supérieur gauche ( 50, 50), un rectangle de largeur et de hauteur de 100 pixels.

• Dessiner un cercle :

  ctx.beginPath(); // 开始绘制路径
  ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 绘制圆
  ctx.fillStyle = "blue";
  ctx.fill(); // 填充路径

  Dans le code ci-dessus, nous utilisons d'abord la méthode startPath() pour commencer à dessiner le chemin, puis utilisons la méthode arc() pour dessiner un cercle avec une coordonnée centrale de (100, 100) et un rayon de 50 pixels. Un cercle dont l'angle et l'angle d'extrémité sont égaux à 0. Utilisez ensuite l'attribut fillStyle pour définir la couleur de remplissage sur bleu, et enfin utilisez la méthode fill() pour remplir le chemin.

• Dessinez une ligne droite :

  ctx.moveTo(100, 200); // 将画笔移动到坐标(100, 200)
  ctx.lineTo(200, 200); // 绘制直线到坐标(200, 200)
  ctx.strokeStyle = "green"; // 设置描边颜色
  ctx.stroke(); // 描边路径

  Dans le code ci-dessus, nous utilisons d'abord la méthode moveTo() pour déplacer le pinceau aux coordonnées (100, 200), puis utilisons la méthode lineTo() pour tracer une ligne droite aux coordonnées (200, 200). Utilisez ensuite la propriété StrokeStyle pour définir la couleur du trait sur vert, et enfin utilisez la méthode Stroke() pour tracer le chemin.

4. Draw text
   Canvas fournit plusieurs méthodes pour dessiner du texte, telles que fillText(), StrokeText(), etc. Voici un exemple de code pour dessiner du texte :

ctx.font = "30px Arial"; // 设置字体样式
ctx.fillStyle = "black"; // 设置填充颜色
ctx.fillText("Hello Canvas!", 100, 100); // 绘制填充文本
ctx.strokeStyle = "red"; // 设置描边颜色
ctx.strokeText("Hello Canvas!", 100, 100); // 绘制描边文本

Dans le code ci-dessus, nous utilisons d'abord l'attribut font pour définir le style de police, puis utilisons l'attribut fillStyle pour définir la couleur de remplissage sur noir et appelons fillText(). méthode pour dessiner le texte rempli. Utilisez ensuite la propriété StrokeStyle pour définir la couleur du trait sur rouge et appelez la méthode StrokeText() pour dessiner le texte du trait.

5. Utilisation d'images
   Canvas peut utiliser des images pour dessiner et les objets Image peuvent être utilisés pour charger des images. Voici un exemple de code qui utilise des images :

var img = new Image(); // 创建Image对象
img.src = "image.jpg"; // 设置图像路径
img.addEventListener("load", function() {
  ctx.drawImage(img, 0, 0); // 绘制图像
});

Dans le code ci-dessus, créez d'abord un objet Image, puis utilisez l'attribut src pour définir le chemin de l'image. Dans l'événement load, appelez la méthode drawImage() pour dessiner l'image, les paramètres étant l'objet Image et les coordonnées du coin supérieur gauche (0, 0).

Ce qui précède représente la connaissance de base de Canvas et des exemples de code. En apprenant ces connaissances de base, cela peut vous aider à comprendre et à utiliser Canvas pour les opérations de dessin. J'espère que cet article vous aidera !

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!