简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Toile HTML5

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

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

est juste un conteneur pour les graphiques, 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 du navigateur

7.jpg


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

Remarque: Internet Explorer 8 et versions antérieures La version IE du navigateur ne prend pas en charge l'élément

Créer un canevas (Canvas)

Un canevas. sur la page Web Au centre se trouve une boîte rectangulaire, dessinée à travers l'élément

Remarque: Par défaut, l'élément

Un exemple simple est le suivant :

< ;/canvas> ;

Remarque: Les balises doivent généralement spécifier un attribut id (souvent référencé dans les scripts), et les attributs width et height définissent la taille du toile.

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

Utilisez l'attribut de stylepour ajouter des bordures :

    php.cn 

   您的浏览器不支持 HTML5 canvas 标签。
<. >Exécutez le programme et essayez-le

Utilisez JavaScript pour dessiner des images

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

Instance

    php.cn 

   您的浏览器不支持 HTML5 canvas 标签。

Résultat de l'exécution du programme :

1.jpg

Exemple d'analyse :

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

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

Ensuite, créez l'objet contextuel :

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

getContext("2d") est un objet HTML5 intégré avec une variété de chemins de dessin, de rectangles, de cercles, de caractères, et ajouts Méthode Image.

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 par défaut pour fillStyle est #000000 (noir). La méthode

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

Coordonnées de la toile

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

Exemple de coordonnées

Comme indiqué ci-dessous, les coordonnées X et Y de la toile sont utilisées pour positionner la peinture sur la toile. Les coordonnées de positionnement sont affichées sur le cadre rectangulaire où se déplace la souris.

1.jpg

Canvas - Chemin

Pour tracer des lignes sur Canvas, nous utiliserons les deux méthodes suivantes :

moveTo(x ,y) Définir la ligneCoordonnée de début

lineTo(x,y) Définir la ligneCoordonnée de fin

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

Instance

Définir la coordonnée de départ ( 0,0) et la coordonnée de fin (200,100). Utilisez ensuite la méthode Stroke() pour tracer la ligne :

    php.cn 

   您的浏览器不支持 HTML5 canvas 标签。

Résultat de l'exécution du programme :

8.jpg

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

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

En fait, nous utilisons la méthode "ink" pour dessiner un cercle, comme Stroke() ou Fill().

Exemple

Utiliser la méthode arc() pour dessiner un cercle :

    php.cn 

   您的浏览器不支持 HTML5 canvas 标签。

Résultat de l'exécution du programme :

4.jpg

Canvas - Texte

Utilisez Canvas 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 solide sur la toile

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

Instance

    php.cn 

   您的浏览器不支持 HTML5 canvas 标签。

Résultat en cours d'exécution du programme :

8.jpg

Toile - Dégradé

Le dégradé peut remplir des rectangles, des cercles, des lignes, du texte, etc., diverses formes peuvent être personnalisées Définissez différentes couleurs.

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

createLinearGradient(x,y,x1,y1) - Créer un dégradé de ligne

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 ou deux couleurs d'arrêt au-dessus de.

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

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

Instance

Utilisez createLinearGradient() pour créer un dégradé linéaire. Remplissez le rectangle de dégradé :

    php.cn 

   您的浏览器不支持 HTML5 canvas 标签。

Résultat de l'exécution du programme :

3.jpg

Exemple

Utilisez createRadialGradient() pour créer un dégradé radial/circulaire. Remplissez le rectangle de dégradé :

    php中文网(php.cn) 

   您的浏览器不支持 HTML5 canvas 标签。

Résultat en cours d'exécution du programme :

5.jpg

Canvas - Image

Vous pouvez mettre une image sur la toile, afin de pouvoir effectuer certaines opérations sur l'image et ajouter certains éléments de votre choix, comme du texte.

Placez une image sur la toileUtilisez la méthode suivante :

drawImage(image,x,y)

Utiliser une image

7.jpg

Instance

Placer une image sur le toile :

    php中文网(php.cn) 

  
使用图像:
 The Scream
画布:
  您的浏览器不支持 HTML5 canvas 标签。

Résultat de l'exécution du programme :

1.jpg

HTML Manuel de référence Canvas

Pour les attributs complets de la balise, veuillez vous référer au manuel de référence Canvas.

Le HTML 标签

标签 描述
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
标签

< span style="font-size: 16px;">描述<><>
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
<><><>
Formation continue
||
php.cn
您的浏览器不支持 HTML5 canvas 标签。
soumettre Réinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)491179 joue
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！