Maison > Article > interface Web > Comment dessiner des graphiques avec l'élément canvas en HTML5
Aujourd'hui, je vais partager avec vous l'utilisation de l'élément canvas en HTML5. Il a une certaine valeur de référence et j'espère qu'il sera utile à tout le monde.
[Cours recommandés : Tutoriel HTML5]
élément de toile
Utilisez principalement JavaScript pour dessiner des images sur des pages Web. Le canevas est une zone rectangulaire et chaque pixel peut être contrôlé. Le canevas dispose de diverses méthodes pour dessiner des chemins, des rectangles, des cercles et ajouter des images. Ensuite, nous allons L'article présente en détail le
code HTML
<canvas id="demo"></canvas>
rectangle
fillStyle : utilisé pour ajouter de la couleur aux graphiques
fillRect(x,y,width,height)
x : la valeur x du coin supérieur gauche
y : la valeur y du coin supérieur gauche
largeur, hauteur : c'est tout Largeur et hauteur du graphique
<script type="text/javascript"> var demo=document.getElementById("demo"); var fang=demo.getContext("2d"); fang.fillStyle="pink"; fang.fillRect(0,0,200,50); </script>
Ligne
moveTo : position de début de ligne
lineTo : position de fin
lineWidth : largeur de ligne
StrokeStyle : couleur
Stroke : commencer à dessiner
var demo=document.getElementById("demo"); var xian=demo.getContext("2d"); xian.moveTo(10,10); xian.lineTo(100,100); xian.lineWidth=2; xian.strokeStyle="pink"; xian.stroke();
Circulaire
beginPath() : Démarrer le chemin
arc(x,y,r,sAngle,eAngle, dans le sens inverse des aiguilles d'une montre)
x , y : les coordonnées du point central du cercle
r : le rayon du cercle
sAngle, eAngle : l'angle de départ et l'angle d'arrivée du cercle
sens antihoraire : peut être écrit ou non Spécifie si le tracé doit être dessiné dans le sens inverse des aiguilles d'une montre ou dans le sens des aiguilles d'une montre. False = dans le sens des aiguilles d'une montre, true = dans le sens inverse des aiguilles d'une montre.
var demo=document.getElementById("demo"); var yuan=demo.getContext("2d"); yuan.beginPath(); yuan.arc(100,100,50,0,2*Math.PI); yuan.strokeStyle="pink"; yuan.stroke();
Insertion graphique
drawImage(img,sx,sy,swidth ,sheight,x,y,width,height)
sx,sy : couper la position des coordonnées x, y
swidth,sheight : largeur et hauteur de l'image coupée
x,y : La position des coordonnées x,y de placement de l'image sur la toile
largeur, hauteur : La largeur et la hauteur de l'image à utiliser
var demo=document.getElementById("demo"); var img1=document.getElementById("img1"); var img=demo.getContext("2d"); img1.onload=function(){ img.drawImage(img1,10,10,100,120)
Résumé : ce qui précède représente l'intégralité du contenu de cet article. J'espère que cet article sera utile à tout le monde.
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!