HTML5 utilise un canevas pour dessiner des cercles creux et des cercles pleins_html5 compétences du didacticiel

Ce que je partage avec vous ici est un exercice de dessin de cercles creux et de cercles pleins que j'ai fait lorsque j'apprenais la toile. C'est très simple.

Copier le code

Le code est le suivant :

var canvas=document.getElementById("canvas");
var cxt= canvas.getContext("2d");
//Dessine un cercle creux
cxt.beginPath();
cxt.arc(200,200,50,0,360,false);
cxt .lineWidth= 5;
cxt.StrokeStyle="green";
cxt.Stroke();//Dessine un cercle creux
cxt.closePath();
//Dessine un cercle plein
cxt.beginPath();
cxt.arc(200,100,50,0,360,false);
cxt.fillStyle="red";//Couleur de remplissage, la valeur par défaut est noir
cxt.fill ();// Dessinez un cercle plein
cxt.closePath();
//Combinaison de creux et de solide
cxt.beginPath();
cxt.arc(300,300,50,0,360, false);
cxt.fillStyle="red";
cxt.fill();
cxt.StrokeStyle="green";
cxt.Stroke();
cxt.closePath( );