HTML5, wie man ein Rechteck mit Farbe und Transparenz für die Form zeichnet. Diagramm_HTML5-Tutorial-Tipps

1. Passen Sie den Pinselstil an

Wenn Sie der Formkarte Farbe hinzufügen möchten, müssen Sie die folgenden zwei wichtigen Attribute verwenden.

fillStyle: Legen Sie die Standardfarbe für alle Füllvorgänge fest.
StrokeStyle: Legen Sie die Standardfarbe für alle Strichoperationen fest.

2. Zeichnen Sie ein Rechteck mit Farbe und Transparenz

Code kopieren

Der Code lautet wie folgt:

content=" text/html; charset = utf-8">
🎜>/ /Diese Funktion wird aufgerufen, nachdem die Seite vollständig geladen ist
function pageLoaded()
{
//Beachten Sie, dass der tCanvas-Name mit dem identisch sein muss id im Text unten
var canvas = document .getElementById('tCanvas');//Holen Sie sich die 2D-Zeichenumgebung der Leinwand
var context = canvas.getContext('2d'); >//Der Zeichencode wird hier angezeigt
/ /Setzen Sie die Füllfarbe auf Rot
context.fillStyle = "red"
//Zeichnen Sie ein rotes, durchgezogenes Rechteck
context.fillRect(50, 50,100,40);
//Setzen Sie die Kantenfarbe für grün
context.fillStyle = "green";
//Zeichnen Sie ein grünes hohles Rechteck
context.StrokeRect(120,100,100,35); 🎜>//Verwenden Sie rgb(), um die Füllfarbe auf Blau zu setzen
context.fillStyle = "rgb(0,0,255)"
//Zeichnen Sie ein blaues, durchgezogenes Rechteck
context.fillRect(80,230,100, 40);
//Setze die Füllfarbe auf Schwarz und der Alpha-Wert (Transparenz) ist 0,2
context.fillStyle = "rgba(0,0,0,0.2)"
//Zeichne a transparentes schwarzes festes Rechteck
context.fillRect(300,180,100,50 );
}

>
Tipp: Ihr Browser unterstützt das -Tag nicht. /html>



3. Zeicheneffekt