Explication HTML5Canvas et exemples de didacticiels

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.

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>

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>

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>

Analyse d'instance :

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

Ensuite, créez l'

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

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");

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

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!