HTML5 Canvas Umrandung und Füllung

Jedes Mal, wenn Sie in HTML5Wenn Sie ein Objekt auf dem Canvas zeichnen, müssen Sie zwei Eigenschaften setzen: Stroke (Umriss) und Fill (Füllung)

Stroke- und Fill-Eigenschaften

Jedes Mal, wenn Sie in HTML5Wenn Sie ein Objekt auf dem Canvas zeichnen, müssen Sie zwei Eigenschaften setzen:

1. Umriss

2. Füllung

Stroke (Umriss) und Fill (Füllung) bestimmen, wie ein Objekt gezeichnet wird. Stroke ist der Umriss des Objekts. Fill ist der Inhalt des Objekts innen.

Online-Beispiel

Dies ist ein Beispiel für einen Rechteck, der mit blauer Linie und grünem Füllfarbe gezeichnet wird (es sind actually zwei Rechtecke):

Dies ist der Code zum Zeichnen dieser beiden Rechtecke:

<canvas id="ex1" width="500" height="150" style="border:　1px fest #cccccc;">
　　　　HTML5　Canvas wird nicht unterstützt
</canvas>
<script>
//　1.Warten Sie auf das vollständige Laden der Seite.
window.onload = function() {
　　　　drawExamples();
}
function drawExamples(){
　　　　//　2.Erhalten Sie die Referenz zum canvas-Element.
　　　　var canvas = document.getElementById("ex1);
　　　//　3.Erhalten Sie den Zugriff auf das canvas-Element.2D-Kontext.
　　　　var context = canvas.getContext("2d");
　　　　//　4.Zeichnen Sie ein Diagramm.
　　　　context.fillStyle = "#00"9900";
　　　　context.fillRect(10,10,　100,100);
　　　　context.strokeStyle = "#0000ff";
　　　　context.lineWidth =　5;
　　　　context.strokeRect(10,10,　100,100);
}
</script>

Die Ergebnisse des obigen Beispiels:

Beachten Sie, wie Sie2Die strokeStyle- und fillStyle-Eigenschaften des D-Kontexts werden verwendet, um die Umrandungs- und Füllungsstile zu setzen.

Achtung, wie Sie dieLineWidth-Eigenschaft verwenden, um die Umrandungsbreite (Kontur) des blauen Rechtecks festzulegen. Setzen Sie lineWidth auf5, das bedeutet, die Linienbreite des beschriebenen Rechtecks beträgt5.

.2Zuletzt beachten Sie, wie Sie angeben