Maison  >  Article  >  interface Web  >  Comment dessiner des graphiques avec l'élément canvas en HTML5

Comment dessiner des graphiques avec l'élément canvas en HTML5

清浅
清浅original
2018-11-26 10:38:002576parcourir

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>

Image 1.jpg

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();

Image 2.jpg

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();


Image 3.jpg

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)

Image 4.jpg

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn