Im vorherigen Artikel „Unterhaltsame Implementierung von js: Gib dir ein lächelndes Gesicht mit Brille“ habe ich dir vorgestellt, wie man mit js ein lächelndes Gesicht mit Brille zeichnet. Es macht ziemlich viel Spaß ~ Freunde, die interessiert sind, können es sich ansehen, haha ~Dann wird Ihnen dieser Artikel weiterhin eine interessante Zeichenmethode vorstellen.
Das Thema des heutigen Artikels lautet „Schreiben Sie ein JavaScript-Programm, um das folgende Bild zu zeichnen [diagonale Linie, weißer bis schwarzer Kreis].“
Vielleicht wissen Sie beim ersten Lesen nicht, was Sie erreichen möchten Der Titel sollte nun sehr klar und verständlich sein! Sie können versuchen, dieses Rendering mit js lokal zu realisieren.
Das Folgende ist meine Implementierungsmethode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="1500" height="800">
<p>更新您的浏览器!</p>
</canvas>
<script>
function draw()
{
var ctx = document.getElementById("myCanvas").getContext("2d");
var counter = 0;
for (var i=0;i<6;i++)
{
for (var j=0;j<6;j++)
{
//从白到黑
ctx.fillStyle = "rgb(" + Math.floor(255-42.5*i) + "," + Math.floor(255-42.5*i) +
"," + Math.floor(255-42.5*j) + ")";
ctx.beginPath();
if (i === counter && j === counter)
{
//创建圈
ctx.arc(25+j*50,30+i*50,20,0,Math.PI*2,true);
ctx.fill();
//在圆圈周围创建一个边框，这样白色的会可见
ctx.stroke();
}
}
counter++;
}
}
draw();
</script>
</body>
</html>Okay, lassen Sie uns diesen Code direkt ausführen. Der Effekt ist wie folgt:
Eine kurze Einführung in die beteiligten Methoden:
getElementById()-Methode: kann den Besitz zurückgeben Verweis auf das erste Objekt mit der angegebenen ID;
getContext()-Methode: Gibt eine Umgebung zum Zeichnen auf der Leinwand zurück;
fill()-Methode: Füllt das aktuelle Bild (Pfad), die Standardfarbe ist Schwarz;
fillStyle-Eigenschaft: Legt die zum Füllen des Gemäldes verwendete Farbe, den Farbverlauf oder das Muster fest oder gibt sie zurück.
beginPath()-Methode: Einen Pfad starten oder den aktuellen Pfad zurücksetzen;
arc ()-Methode: Erstellt einen Bogen/eine Kurve (wird zum Erstellen eines Kreises oder Teilkreises verwendet);
Stroke()-Methode: Zeichnet tatsächlich den durch die Methoden moveTo() und lineTo() definierten Pfad. Die Standardfarbe ist Schwarz.
Abschließend möchte ich „
Basic JavaScript Tutorial“ jedem empfehlen ~ Willkommen zum Lernen ~
Das obige ist der detaillierte Inhalt vonZeichnen Sie mit JavaScript eine Kreisdiagonale mit Farbverlauf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
