HTML5 verwendet Canvas zum Zeichnen von Hohlkreisen und Vollkreisen. Tutorial-Fähigkeiten für HTML5

Was ich hier mit Ihnen teile, ist eine Übung zum Zeichnen von Hohlkreisen und Vollkreisen, die ich gemacht habe, als ich Leinwand lernte. Sie ist sehr einfach.

Code kopieren

Der Code lautet wie folgt:

var canvas=document.getElementById("canvas");
var cxt= canvas.getContext("2d");
//Zeichne einen hohlen Kreis
cxt.beginPath();
cxt.arc(200,200,50,0,360,false);
cxt .lineWidth= 5;
cxt.StrokeStyle="green";
cxt.Stroke();//Zeichne einen hohlen Kreis
cxt.closePath();
//Zeichne einen Vollkreis
cxt. beginPath();
cxt.arc(200,100,50,0,360,false);
cxt.fillStyle="red";//Füllfarbe, die Standardeinstellung ist Schwarz
cxt.fill ();// Zeichne einen Vollkreis
cxt.closePath();
//Kombination aus Hohlraum und Vollkreis
cxt.beginPath();
cxt.arc(300,300,50,0,360, false);
cxt.fillStyle="red";
cxt.fill();
cxt.StrokeStyle="green";
cxt.Stroke();
cxt.closePath( );