Présentation des attributs communs de la balise HTML5 Canvas

La balise Canvas est un élément important en HTML5, qui permet de dessiner des graphiques via JavaScript. Dans cet article, nous vous présenterons les propriétés couramment utilisées de la balise Canvas et démontrerons leur utilisation à travers des exemples de code spécifiques.

1. Liste des attributs communs

1. width : définissez la largeur du canevas. La largeur peut être définie à l'aide de valeurs de pixels spécifiques ou à l'aide d'unités relatives telles que des pourcentages.
2. hauteur : définissez la hauteur de la toile. La hauteur peut également être définie à l'aide de valeurs de pixels ou d'unités relatives.
3. id : Spécifiez un identifiant unique pour la balise Canvas afin qu'elle puisse être manipulée via JavaScript.
4. class : spécifiez un nom de classe pour la balise Canvas afin de faciliter le contrôle du style.
5. style : utilisé pour définir le style de l'étiquette Canvas, y compris la couleur d'arrière-plan, le style de bordure, etc.
6. getContext() : Il s'agit d'une méthode très importante utilisée pour obtenir le contexte de l'objet Canvas. Le dessin, la définition de styles et d'autres opérations peuvent être effectués via le contexte.

Ce qui suit est un exemple de code d'une balise Canvas de base :

<canvas id="myCanvas" width="500" height="300" style="border:1px solid black;"></canvas>

Dans cet exemple, nous créons une balise Canvas d'une largeur de 500 pixels et d'une hauteur de 300 pixels, et définissons une bordure noire.

2. Dessiner des graphiques

La puissance de la balise Canvas réside dans le fait que vous pouvez utiliser du code JavaScript pour dessiner divers graphiques :

1. Dessinez une ligne droite : utilisez context.lineTo(). La méthode peut tracer une ligne droite. L'exemple de code suivant trace une ligne droite des coordonnées (50, 50) aux coordonnées (200, 200). context.lineTo()方法可以绘制一条直线。下面的示例代码绘制了一条从坐标(50, 50)到坐标(200, 200)的直线。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 200);
ctx.stroke();

2. 绘制矩形：使用context.fillRect()方法可以绘制一个矩形。下面的示例代码绘制了一个宽度为100像素，高度为50像素的红色矩形。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 50);

3. 绘制圆形：使用context.arc()方法可以绘制一个圆形。下面的示例代码绘制了一个半径为30像素的蓝色圆形。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 30, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

4. 清空画布：使用context.clearRect()方法可以清空画布，实现动态绘制效果。下面的示例代码每隔一秒清空画布，并绘制一个随机位置和颜色的圆形。

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

function drawCircle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;
  var color = "#"+((1<<24)*Math.random()|0).toString(16);
  ctx.beginPath();
  ctx.arc(x, y, 30, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
}

setInterval(drawCircle, 1000);

上面的示例代码使用setInterval()函数每隔一秒调用一次drawCircle()

rrreee

Dessinez un rectangle : utilisez la méthode context.fillRect() pour dessiner un rectangle. L'exemple de code ci-dessous dessine un rectangle rouge d'une largeur de 100 pixels et d'une hauteur de 50 pixels.

🎜rrreee
🎜Dessinez un cercle : utilisez la méthode context.arc() pour dessiner un cercle. L'exemple de code ci-dessous dessine un cercle bleu d'un rayon de 30 pixels. 🎜🎜rrreee
🎜Effacer le canevas : utilisez la méthode context.clearRect() pour effacer le canevas et obtenir des effets de dessin dynamiques. L'exemple de code suivant efface le canevas toutes les secondes et dessine un cercle dans une position et une couleur aléatoires. 🎜🎜rrreee🎜L'exemple de code ci-dessus utilise la fonction setInterval() pour appeler la fonction drawCircle() chaque seconde pour effacer continuellement le canevas et dessiner de nouveaux cercles. 🎜🎜Grâce à l'exemple de code ci-dessus, nous pouvons voir l'utilisation de certaines propriétés courantes de la balise Canvas et comment utiliser JavaScript pour dessiner des graphiques. J'espère que cet article vous aidera à comprendre l'utilisation des balises 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!