Maison > interface Web > Tutoriel H5 > le corps du texte

Explication HTML5Canvas et exemples de didacticiels

零下一度
Libérer: 2017-05-16 11:39:04
original
2217 Les gens l'ont consulté

HTML5 Canvas

définit les graphiques, tels que les graphiques et autres images, 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.

Explication HTML5Canvas et exemples de didacticiels

Qu'est-ce que Canvas ?

L'élément HTML5 est utilisé pour dessiner des graphiques, via un script (généralement JavaScript) pour complet.

n'est qu'un conteneur graphique, vous devez utiliser un script pour dessiner les graphiques.

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

Prise en charge des navigateurs

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

Remarque : Internet Explorer 8 et versions antérieures d'IE. du 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 : Par défaut, l'élément n'a ni bordure ni contenu.

Un exemple simple est le suivant :

<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 le taille du canevas.

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

Utilisez l'attribut style pour ajouter des bordures :

Exemple

<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>
Copier après la connexion

Utilisez JavaScript pour dessiner des images

L'élément canevas lui-même n'a pas la capacité dessin. Tous les travaux de dessin doivent être effectués dans JavaScript :

Instance

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Copier après la connexion

Analyse d'instance :

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

Ensuite, créez l'
var c=document.getElementById("myCanvas");
Copier après la connexion
objet de contexte

 :

l'objet getContext("2d") est un objet HTML5 intégré avec une variété de chemins de dessin, de rectangles, de cercles, et des personnages. Et comment ajouter des images.
var ctx=c.getContext("2d");
Copier après la connexion

Les deux lignes de code suivantes dessinent un rectangle rouge :

Définissez la propriété fillStyle sur une couleur, un dégradé ou un motif CSS. Le paramètre par défaut pour fillStyle est #000000 (noir). La méthode
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
Copier après la connexion

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).

【Recommandations associées】


1.

Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger 2.

Tutoriel vidéo en ligne h5 gratuit

3

Tutoriel vidéo html5 original php.cn

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:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal