Maison > Article > interface Web > À quoi sert le canevas html5 ? Explication détaillée du dernier élément canevas en HTML5

À quoi sert le canevas html5 ? Explication détaillée du dernier élément canevas en HTML5

寻∝梦original: 2018-08-13 18:52:022502parcourir

HTML5 contient de nombreux nouveaux éléments, mais c'est pour nous permettre de créer plus facilement de plus belles pages Web. Jetons maintenant un coup d'œil à l'élément que je présente ci-dessous

HTML5 Canvas<.>

Dernière modification le 01 août 2017 La balise

définit des graphiques, tels que des graphiques et autres images, et vous devez utiliser des scripts pour dessiner des graphiques.

Dessinez un rectangle rouge, un rectangle dégradé, un rectangle coloré et du texte coloré sur la toile.

Qu'est-ce que Canvas ?

L'élément HTML5 est utilisé pour dessiner des graphiques, ce qui se fait via des scripts (généralement JavaScript). La balise

est simplement. un conteneur graphique, vous devez utiliser un script pour dessiner le graphique.

Vous pouvez utiliser Canva pour dessiner des chemins, des cases, des cercles, des personnages et ajouter des images de différentes manières.

À quoi sert le canevas html5 ?

La balise HTML5 5ba626b379994d53f7acf72a64f9b697 est utilisée pour dessiner des images (via un script, généralement JavaScript). Cependant, l'élément 5ba626b379994d53f7acf72a64f9b697 lui-même n'a aucune capacité de dessin (c'est juste un conteneur pour les graphiques) - vous devez utiliser un script pour effectuer le dessin proprement dit. La méthode getContext() renvoie un objet qui fournit des méthodes et des propriétés pour dessiner sur le canevas.

Prise en charge des navigateurs

Internet Explorer 9+, Firefox, Opera, Chrome et Safari prennent en charge l'élément.

Remarque : Internet Explorer 8 et les versions antérieures d'IE. le navigateur ne prend pas en charge l'élément.

Créer un canevas (Canvas)

Un canevas est une boîte rectangulaire dans une page Web, dessinée à travers l'élément.

Remarque : valeur par défaut L'élément inférieur n'a ni bordure ni contenu.

Un exemple simple est le suivant, tel que :

<canvas id="myCanvas" width="200" height="100"></canvas>

Remarque : les balises doivent généralement spécifier un attribut id (souvent référencé dans les scripts), des attributs de largeur et de hauteur pour définir la taille. du canevas.

Conseil : Vous pouvez utiliser plusieurs éléments 5ba626b379994d53f7acf72a64f9b697 dans une page HTML

Utilisez l'attribut style pour ajouter des bordures, telles que :

<.>Exemple d'analyse :

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Tout d'abord, recherchez l'élément 5ba626b379994d53f7acf72a64f9b697 :

var c=document.getElementById("myCanvas");

Ensuite, créez le contexte object :

var ctx =c.getContext("2d");

getContext("2d") L'objet est un objet HTML5 intégré avec plusieurs méthodes pour dessiner des chemins, des rectangles et des cercles. , des personnages et l'ajout d'images.

Les deux lignes de code suivantes dessinent un rectangle rouge :

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

Définissez la propriété fillStyle sur une couleur, un dégradé ou un motif CSS. Le paramètre fillStyle par défaut est #000000 (noir). La méthode

fillRect(x,y,width,height) définit la méthode de remplissage actuelle du rectangle.

Coordonnées du canevas

le canevas est une grille bidimensionnelle.

Les coordonnées du coin supérieur gauche du canevas sont (0,0)

La méthode fillRect ci-dessus a des paramètres (0,0,150,75).

Moyens : Dessinez un rectangle de 150x75 sur la toile, en partant du coin supérieur gauche (0,0).

Canvas - Chemin

Pour tracer une ligne sur Canvas, nous utiliserons les deux méthodes suivantes :

moveTo(x,y) pour définir les coordonnées de départ de la ligne

lineTo(x,y) définit la coordonnée de fin de la ligne

Pour tracer la ligne, nous devons utiliser la méthode "ink", tout comme Stroke().

Ceci est un exemple :

Pour dessiner un cercle dans le canevas, nous utiliserons la méthode suivante :

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>

arc(x,y,r,start,stop)

En fait, lorsque nous dessinons un cercle, nous utilisons la méthode "ink", comme Stroke() ou fill()

Autre exemple :

Votre navigateur ne prend pas en charge la balise canevas HTML5. c2caaf3fc160dd2513ce82f021917f8b

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Canvas - texte

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 
</body>
</html>

Utilisez le canevas pour dessiner du texte Les propriétés et méthodes importantes sont les suivantes :

police - définir la police

fillText(text,x,y) - Dessiner du texte plein sur la toile

StrokeText(text,x,y) - Dessiner du texte creux sur la toile

Canvas - Dégradé

Le dégradé peut être rempli de rectangles, de cercles, de lignes, de texte, etc. Différentes formes peuvent être personnalisées avec différentes couleurs.

Il existe deux manières différentes de définir les dégradés du canevas :

createLinearGradient(x,y,x1,y1) - Créer des dégradés de lignes

createRadialGradient(x,y, r, x1,y1,r1) - Créer un dégradé radial/circulaire

Lorsque nous utilisons des objets dégradés, nous devons utiliser deux couleurs d'arrêt ou plus.

La méthode addColorStop() spécifie l'arrêt de couleur. Les paramètres sont décrits par des coordonnées, qui peuvent être de 0 à 1.

Utilisez le dégradé, définissez la valeur de fillStyle ou StrokeStyle sur le dégradé, puis dessinez une forme, telle qu'un rectangle, du texte ou une ligne.

[Recommandations associées]

Éléments de base du HTML, vous permettant d'apprendre le HTML à partir de zéro

Nouvelles balises en HTML5 centent

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!

JavaScript html5 firefox css chrome safari html var 对象 canvas

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse détaillée de l'audio en HTML5Article suivant：Analyse détaillée de l'audio en HTML5

Articles Liés

Voir plus