Techniques de dessin courantes dans Canvas en HTML5

Dans H5, nous utiliserons souvent l'élément canvas pour dessiner des graphiques. Aujourd’hui, nous allons donc vous présenter comment utiliser Canvas et dans quelles circonstances Canvas peut être utilisé. Et les compétences en peinture sur toile

canvas est utilisée pour dessiner des graphiques sur la page

aperçu de la toile :

élément de toile html5 et javascript sont utilisés ensemble Dessinez des graphiques sur la page

la toile est une toile, dessinez des chemins, des rectangles, des cercles sur la toile...

Créez une toile

< ;ID de la toile largeur hauteur>

graphiques de dessin sur toile : ---》dessin javascript

La toile elle-même n'a pas le dessin capacité, travail de dessin Tout est fait en javascript *****

js obtient l'élément

element.getContext(“2d”) l'objet, qui peut dessiner des graphiques 2D. Dessinez des rectangles, des chemins, des caractères circulaires... et d'autres méthodes

cxt.fillStyle = "#ff0000" //Dessiner la couleur de remplissage

cxt. fillRect(25,10,150,75);//x, y,w,h déterminer la forme 25,10 coordonnées du point de départ

Remarque : toile

Votre navigateur ne prend pas en charge canvas

Tracer des lignes droites et rectangles

Lignes :

cxt.moveTo(10,10); Point de départ original

cxt.lineTo(150,50); le point de départ est le point de départ de la ligne droite suivante du même graphique 2D

cxt.stroke(); Sortie

rectangle :

cxt.StrokeStyle = "#ff0000" ; Couleur de la bordure du rectangle

cxt. StrokeRect(10,10, 50, 50); Dessiner les coordonnées du rectangle

cxt.fillStyle = "#ff0000" ; Couleur de remplissage

cxt.fillRect(10,10,150,150); Position de remplissage

Dessinez un cercle :

1》 Html5 Degré du cercle

2》 Tracez un cercle

cxt.arc(x, y,radius,startAngle,endAngle, autres paramètres (vrai dans le sens inverse des aiguilles d'une montre, faux dans le sens des aiguilles d'une montre))

x,y point de départ

rayon rayon

startAngle point de départ degré

endAngle degré de fin

Dessiner un triangle

BeginPath() Commencer à dessiner le chemin

Effacer l'élément de canevas :

Cxt. clearRect(x,y,width,height) Efface les éléments de canevas

de (x, y) plage de largeur et de hauteur Enregistrez et restaurez l'

état du canevas

Cxt.save() enregistre l'état

Cxt.restore() restaure l'état enregistré, y compris couleur de bordure et de remplissage

Déplacer les coordonnées Espace :

Traduire : Mouvement des points de la toile

Traduire (150 150)

Original 0, 0 ---> 150, 150

Ce qui précède est Ceci est un aperçu de l'élément toile. Je pense que tout le monde aurait dû le comprendre après avoir tant dit. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture connexe :

Comment utiliser la balise

du html

Comment rédiger la déclaration de type de document html

Code du menu déroulant HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!