Comment utiliser les compétences du didacticiel HTML5 canvas_html5

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 :
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