communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > Comment utiliser les compétences du didacticiel HTML5 canvas_html5

Comment utiliser les compétences du didacticiel HTML5 canvas_html5

WBOY
Libérer： 2016-05-16 15:45:36
original
1930 Les gens l'ont consulté

L'élément

canvas utilise JavaScript pour dessiner des images sur la page Web et n'a aucune capacité de dessin.

Canvas est une zone rectangulaire qui peut être contrôlée à chaque pixel.

Canvas propose de nombreuses façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images.

Voici quelques exemples :

1. Remplissez la toile

Code JavaScriptCopier le contenu dans le presse-papiers
  1. "myCanvas" width="200" height="100" style="border:1px rouge uni;">
Exécuter comme suit :

2. Obtenir les coordonnées

Code JavaScript
Copier le contenu dans le presse-papiers
Code XML/HTML
Copier le contenu dans le presse-papiers
  1. <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordonnées(event)" onmouseout="cnvs_clearCoordonnées()">div>
  2. <div id="xycoordonnées" >div>

Exécuter comme suit :

3. Tracez des lignes et des graphiques

1) Dessinez un carré comme suit :

Code JavaScriptCopier le contenu dans le presse-papiers
  1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Votre navigateur ne prend pas en charge la balise canvas
  6. Exécuter comme suit

2) Tracez un cercle comme suit :

Code JavaScript

Copier le contenu dans le presse-papiers
  1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Votre navigateur ne prend pas en charge le canevas
  6. Exécuter comme suit :

4. Dessinez un dégradé

Code JavaScript

Copier le contenu dans le presse-papiers
    "myCanvas"
  1. width="200" height="100" style="border:1px solid #c3c3c3;"> Votre navigateur ne prend pas en charge la balise canvas .
  5. Exécuter comme suit :
    7. 5. Photos

Code JavaScript

Copier le contenu dans le presse-papiers

  1. "myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;"> Votre navigateur ne prend pas en charge la balise canvas
  2. .
  6. L'exécution est la suivante :

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Texte original :

http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html

Étiquettes associées：
canvas html5 画布
source：php.cn
Article précédent：Code d'effets spéciaux d'animation de compte à rebours de la barre de progression HTML5 CSS3 [recommandé] Compétences du didacticiel _html5 Article suivant：HTML5 Canvas的常用线条属性值总结_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
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
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
Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
Depuis 2024-04-02 11:47:56
0
1
275
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
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