communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > À 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

寻∝梦
Libérer： 2018-08-13 18:52:02
original
2529 Les gens l'ont consulté

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 est utilisée pour dessiner des images (via un script, généralement JavaScript). Cependant, l'élément 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>
Copier après la connexion
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 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>
Copier après la connexion

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

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>
Copier après la connexion

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. 
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées：
HTML5最新的canvas元素
source：php.cn
Article précédent：Analyse détaillée de l'audio en HTML5 Article suivant：Explication détaillée du code vidéo en HTML5
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Test unitaire OverflowException : nombre maximum de tentatives atteint 10 000 fois, valeur unique toujours introuvable Je fais donc quelques tests unitaires avant d'implémenter de nouvelles fonctionnalités. J'...
Depuis 2024-04-06 11:27:39
0
2
347
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
Titre réécrit : centrez un élément carré ou circulaire HTML fixe horizontalement et verticalement une fois redimensionné. Comment centrer un élément HTML fixe carré ou circulaire de différentes tailles horizontal...
Depuis 2024-04-04 12:31:51
0
1
322
Comment puis-je transformer le texte en un nouvel élément (comme un séparateur) lorsque je clique dessus ? J'essaie de trouver un moyen de faire en sorte que certains textes de la page se transform...
Depuis 2024-04-04 11:21:03
0
1
3580
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal