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.
Code JavaScriptCopier le contenu dans le presse-papiers
-
-
-
-
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
-
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordonnées(event)" onmouseout="cnvs_clearCoordonnées()">div>
-
<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
-
Votre navigateur ne prend pas en charge la balise canvas
-
-
-
-
-
Exécuter comme suit
2) Tracez un cercle comme suit :
Code JavaScript
Copier le contenu dans le presse-papiers
-
Votre navigateur ne prend pas en charge le canevas
-
-
-
-
-
Exécuter comme suit :
4. Dessinez un dégradé

Code JavaScript
Copier le contenu dans le presse-papiers
Code JavaScript
Copier le contenu dans le presse-papiers

-
Votre navigateur ne prend pas en charge la balise canvas
- .
-
-
-
-
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.