Wie zeichnet Rechtecke und Text mit dem HTML5 Canvas

Einige primitive Formen können direkt auf den Grafikkontext des gezeichnet Segeltuch

Element von HTML5. Die häufigsten Formen sind Rechtecke und Text, die auch Schatten haben. Hier ist, wie Sie beide erstellen.

Zeichnen Rechtecke mit HTML5-Canvas

Sie können drei verschiedene Arten von Rechtecken zu zeichnen, wie in der Figur gezeigt:

  • clearRect (x, y, w, h): Löscht ein Rechteck mit der linken oberen Ecke (x, y) Und Größe (w, h). Im Allgemeinen wird das Löschen in der Hintergrundfarbe zeichnen.

  • fillRect (x, y, w, h): Zeichnet eine Box mit der oberen linken Ecke (x, y) Und Größe (w, h). Das Rechteck wird mit der aktuell definierten ausgefüllt fillStyle.

  • strokeRect (x, y, w, h): Zeichnet eine Box mit der oberen linken Ecke (x, y) Und Größe (w, h). Die Box ist nicht gefüllt, aber die Kontur wird in der aktuell definierten gezogen stroke und unter Verwendung der aktuellen Linienbreite.

    bild0.jpg

Hier ist der Code, der die Figur erzeugt:

Funktion draw () {var Zeichnung = document.getElementById ( "Zeichnung") - var con = drawing.getContext ( "2D") - con.fillStyle = "red" -con.strokeStyle = "green" -con.lineWidth = " 5 "-con.fillRect (10, 10, 180, 80) -con.strokeRect (10, 100, 180, 80) -} // end Unentschieden

Zeichnung Text mit HTML5-Canvas

Das Segeltuch Tag hat eine vollständige Unterstützung für Text. Sie können Text überall auf der Leinwand, mit der angegebenen Schriftart und Größe, die Sie wollen hinzufügen, wie in dieser Abbildung einer Leinwand mit eingebetteten Text angezeigt:

image1.jpg

Der erste Schritt Text in Zeichnung ist die Schriftart zu wählen. Canvas-Schriftarten werden durch die Zuweisung einer Schriftart in den Kontext des erstellt Schriftart Attribut. Schriftarten werden wie die Single-String-Schriftart Zuordnung in CSS definiert. Sie können Sie tun, um alle Schriftmerkmale in derselben Reihenfolge angeben, wenn die Schriftkürzel: Stil, einer Variante, Gewicht, Größe und Familie.

Wenn Sie bereit sind tatsächliche Text auf dem Bildschirm angezeigt werden, verwenden Sie die fillText () Methode, die drei Parameter akzeptiert: der Text angezeigt werden und die X- und Y-Position der linken, rechten Seite des Textes. Der folgende Code erzeugt die Ergebnisse in der Figur:

Funktion draw () {var Zeichnung = document.getElementById ( "Zeichnung") - var con = drawing.getContext ( "2D") - // klar backgroundcon.fillStyle = "white" -con.fillRect (0,0, 200, 200) - // zeichnen Schriftart in redcon.fillStyle = "red" -con.font = "20pt sans-serif" -con.fillText ( "Canvas Rocks!", 5, 100) -con.strokeText ( "Canvas Rocks! ", 5, 130) -} // end Unentschieden

Ähnliche

Menü