html5-Canvas peut dessiner divers graphiques dans les compétences du didacticiel web_html5

Je pense que la chose la plus importante dans HTML5 est l'introduction de Canvas, qui nous permet de dessiner divers graphiques sur le Web. On a l'impression que cela seul est un peu flou entre nos programmes Web et nos programmes de bureau. Il existe également des dessins XML sur le Web en dehors de HTML5, tels que VML et SVG. Canvas est un dessin basé sur des pixels. Canvas est un nœud html équivalent à une planche à dessin. Il faut utiliser js pour faire fonctionner le dessin.
Comme suit :
Votre navigateur ne prend pas encore en charge la définition .
Nous pouvons obtenir l'objet canevas sous la forme var c=document.getElementById("myCanvas"); ses méthodes d'attribut js sont répertoriées ci-dessous :
1 : Dessinez l'objet de rendu , c.getContext( " 2d"), pour obtenir l'objet de dessin 2d, l'objet obtenu sera le même objet peu importe le nombre de fois qu'on l'appellera.
2 : Méthode de dessin  :
clecrRect(left,top,width,height) efface la zone rectangulaire spécifiée,
fillRect(left,top,width,height) dessine le rectangle, et fillStyle remplir.
fillText(text,x,y) dessine du texte ;
StrokeRect(left,top,width,height) dessine un rectangle et dessine la bordure avec StrokeStyle.
beginPath() : démarre le dessin du chemin et réinitialise le chemin à l'état initial ;
closePath() : le dessin du chemin se termine. Il dessinera un intervalle fermé et ajoutera une courbe fermée à partir du départ. position aux coordonnées actuelles.
moveTo(x, y) : Définit les coordonnées réelles du dessin.
lineTo(x, y); Trace une ligne droite de la position réelle actuelle à x, y.
fill(), Stroke(), clip() : Après avoir terminé le remplissage final et le contour de la bordure du dessin, coupez la zone.
arc() : dessinez un arc, la position centrale, le radian de départ et le radian final pour spécifier la position et la taille de l'arc ;
rect() : chemin rectangulaire
drawImage (Imag img) : dessiner une image ;
quadraticCurveTo() : chemin de spline quadratique, paramètre deux points de contrôle ;
bezierCurveTo() : ​​courbe de Bézier, paramètre trois points de contrôle
createImageData, getImageData, putImageData : Canvas Medium pixel ; données. ImageData enregistre la largeur, la hauteur et les données, où data est l'enregistrement de notre pigment sous la forme
argb, donc la longueur de la taille du tableau est largeur*hauteur*4 et l'ordre est rgba. getImageData consiste à obtenir les pixels de la zone rectangulaire, et putImageData consiste à définir les pixels de la zone rectangulaire
… et ainsi de suite ;
3 : Transformation de coordonnées  :
translate (x, y) : transformation par translation, l'origine se déplace vers les coordonnées (x, y)
rotation (a) : transformation par rotation, rotation ; un angle en degrés ;
échelle (x, y) : transformation de mise à l'échelle ;
save(), restaurer() : fournit une pile pour enregistrer et restaurer l'état du dessin, save pousse l'état actuel du dessin dans la pile, restaurer fait apparaître la pile, restaurer l'état du dessin
… et ainsi de suite !
D'accord, c'est trop tard. Ci-joint mon code de test :

Copier le code

Le code est le suivant :

navigation Le navigateur ne le prend pas encore en charge