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

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

WBOY
WBOYOriginal
2016-05-16 15:47:311997Durchsuche
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">
HTML5 🎜>/ /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


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn