Maison  >  Article  >  interface Web  >  html5 utilise Canvas pour dessiner une ligne_html5 compétences du didacticiel

html5 utilise Canvas pour dessiner une ligne_html5 compétences du didacticiel

WBOY
WBOYoriginal
2016-05-16 15:47:161675parcourir

Le code est trop simple, donc je ne dirai pas de bêtises


Copier le code
Le code est le suivant :

var canvas=document.getElementById ("canvas ");
//Définir l'environnement de dessin
var cxt=canvas.getContext('2d');
//Ouvrir un nouveau chemin
cxt.beginPath();
// Définir la largeur du trait
cxt.lineWidth=10;
//Définir la couleur du trait
cxt.StrokeStyle="#00ff00";
//Définir la position du le trait
cxt.moveTo( 20,20);
//Définir la position de déplacement
cxt.lineTo(100,20);
//Tracer une ligne
cxt.stroke( );//La ligne à ce moment est sortie
//Fermer le chemin
cxt.closePath();
//Tous les graphiques de chemin doivent d'abord commencer le chemin, et le chemin doit se terminer après le dessin

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