HTML5-Leinwand-Basiszeichnung, Schatteneffekt zeichnen

ist ein neues Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. In diesem Artikel wird hauptsächlich die Schattenzeichnungsmethode des grundlegenden Zeichnens von HTML5-Canvas vorgestellt. Als Referenz

ist ein neues Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. Tatsächlich ist dieses Tag das Gleiche wie andere Tags, da es etwas Besonderes ist Erhalten Sie ein CanvasRenderingContext2D-Objekt, und wir können das Objekt zum Zeichnen über JavaScript-Skripte steuern.

ist nur ein Container zum Zeichnen von Grafiken. Zusätzlich zu Attributen wie ID, Klasse, Stil usw. verfügt er auch über Höhe und Breite Attribute. Es gibt drei Hauptschritte zum Zeichnen auf dem >-Element:

1. Rufen Sie das DOM-Objekt ab, das einem Canvas-Objekt entspricht die getContext-Methode (des Canvas-Objekts), um ein CanvasRenderingContext2D-Objekt abzurufen;

3. Rufen Sie das CanvasRenderingContext2D-Objekt zum Zeichnen auf.

Schattenzeichnung

:

shadowColor Legt die für Schatten verwendete Farbe fest oder gibt sie zurück.
shadowBlur Legt den für Schatten verwendeten Unschärfegrad fest oder gibt ihn zurück (größere Werte sind unschärfer).
shadowOffsetX Legt den horizontalen Abstand zwischen dem Schatten und der Form fest oder gibt ihn zurück.
shadowOffsetY Legt den vertikalen Abstand zwischen dem Schatten und der Form fest oder gibt ihn zurück.
Fügen wir einen

Schatten zum zuvor gezeichneten fünfzackigen Stern hinzu

JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. var

   canvas = document.getElementById("canvas"

2. var

   context = canvas.getContext("2d");

context.beginPath ( ; > (
3. var

   i = 0; i < 5; i++) {

4. context.lineTo(Math.cos((18+i*72) /180 *Math.PI)*200+200,                                                                                                                      

   context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,

5. -Math .sin((54+i*72)/180*Math.PI)*80+200);

   }

6. context.
//Legen Sie den Rahmenstil und die Füllfarbe fest
9. context.lineWidth=

   " 3"

   ;

10. context.fillStyle =
"#F6F152"
11. ; 🎜>
    context.StrokeStyle =
"#F5270B"
12. ; .shadowOffsetX = 30;
    context.shadowOffsetY = 30; 🎜>
13. context.shadowBlur = 2;

    context.fill();

context.Stroke();

14. Die Wirkung ist wie folgt:

Das obige ist der detaillierte Inhalt vonHTML5-Leinwand-Basiszeichnung, Schatteneffekt zeichnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!