Ausführliche Erläuterung des Beispielcodes zum Zeichnen eines Rechtecks ​​in der HTML5-Canvas-Grundzeichnung

3856173a0eceb679792f65a38e1fcb00c2caaf3fc160dd2513ce82f021917f8b ist ein neues -Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. Dieser Artikel richtet sich hauptsächlich an alle Einführung in die grundlegende Zeichnung-Methode zum Zeichnen eines Rechtecks ​​in HTML5-Canvas. Interessierte Freunde können sich auf

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8bIt's just a The beziehen Container zum Zeichnen von Grafiken verfügt neben -Attributen wie ID, Klasse, Stil usw. auch über die Attribute Höhe und Breite . Es gibt drei Hauptschritte zum Zeichnen auf dem 5ba626b379994d53f7acf72a64f9b697>: 1. Holen Sie sich das DOM-Objekt

, das dem 5ba626b379994d53f7acf72a64f9b697-Element entspricht.

2. Rufen Sie die Methode getContext() des Canvas-Objekts auf, um ein CanvasRenderingContext2D-Objekt zu erhalten. 3. Rufen Sie das CanvasRenderingContext2D-Objekt zum Zeichnen auf.

Zeichne Rechtecke rect(), fillRect() und StrokeRect()

•context.rect( x , y , width , height ): Definiere nur den Pfad von das Rechteck ; •context.fillRect( x , y , width , height ): zeichne direkt ein gefülltes Rechteck

•context.StrokeRect( x , y , width , height ): zeichne direkt einen rechteckigen Rand

JavaScript Code复制内容到剪贴板
<script type="text/javascript">   
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
  
    //使用rect方法   
    context.rect(10,10,190,190);   
    context.lineWidth = 2;   
    context.fillStyle = "#3EE4CB";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();   
  
    //使用fillRect方法   
    context.fillStyle = "#1424DE";   
    context.fillRect(210,10,190,190);   
  
    //使用strokeRect方法   
    context.strokeStyle = "#F5270B";   
    context.strokeRect(410,10,190,190);   
  
    //同时使用strokeRect方法和fillRect方法   
    context.fillStyle = "#1424DE";   
    context.strokeStyle = "#F5270B";   
    context.strokeRect(610,10,190,190);   
    context.fillRect(610,10,190,190);   
</script>

Zwei Punkte müssen hier erklärt werden: Der erste Punkt ist die Reihenfolge vor und nach dem Zeichnen von Stroke() und Fill(). ) wird später gezeichnet, wenn der Strichrand größer ist, deckt er offensichtlich die Hälfte des von Stroke(); ,0,0,0.2)“ Einstellungen, der letzte Parameter dieser Einstellung ist Transparenz.

Es gibt noch eine weitere Möglichkeit, die sich auf das rechteckige Zeichnen bezieht: Löschen des rechteckigen Bereichs: Kontext.

clear

Rect(x,y,width,height).

Die empfangenen Parameter sind: Löschen Sie die Startposition des Rechtecks ​​sowie die Breite und Länge des Rechtecks. Fügen Sie im obigen Code am Ende des Zeichnens der Grafiken Folgendes hinzu:

context.clearRect(100,60,600,100);

, um den folgenden Effekt zu erzielen:

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispielcodes zum Zeichnen eines Rechtecks ​​in der HTML5-Canvas-Grundzeichnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!