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!