Grundlegende Implementierung des HTML5-Canvas-Zeichnungsfüllstils

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b ist ein neues Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. Tatsächlich ist dieses Tag dasselbe wie andere Tags Holen Sie sich ein CanvasRenderingContext2D-Objekt. Wir können das Objekt zum Zeichnen über ein JavaScript-Skript steuern.
5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b ist nur ein Container zum Zeichnen von Grafiken. Zusätzlich zu Attributen wie ID, Klasse, Stil usw. verfügt es auch über Höhen- und Breitenattribute. Es gibt drei Hauptschritte zum Zeichnen auf dem 5ba626b379994d53f7acf72a64f9b697>: Rufen Sie das DOM-Objekt ab, das dem 5ba626b379994d53f7acf72a64f9b697-Element entspricht. ) Methode des Canvas-Objekts, Holen Sie sich ein CanvasRenderingContext2D-Objekt;
3. Rufen Sie das CanvasRenderingContext2D-Objekt zum Zeichnen auf.

Füllstil
Zusätzlich zum Festlegen der Farbe können mit den zuvor verwendeten Füllstilen und Strichstilen auch andere Füllstile festgelegt werden:
•Linearer Farbverlauf
Verwenden Sie die Schritte (1) var grd = context.createLinearGradient( xstart , ystart, xend , yend ), um einen linearen Farbverlauf zu erstellen und die Start- und Endkoordinaten festzulegen;
(2) grd. addColorStop( stop, color) fügt dem linearen Farbverlauf Farbe hinzu, stop ist ein Wert von 0 bis 1; (3) context.fillStyle=grd wird dem Kontext zugewiesen.

•Radialer Gradient

Diese Methode ähnelt dem linearen Gradienten, außer dass die im ersten Schritt empfangenen Parameter unterschiedlich sindvar grd = context.createRadialGradient(x0, y0, r0 , x1 , y1 , r1 ); erhält die Koordinaten des Startmittelpunkts und den Radius des Kreises sowie die Koordinaten des Endmittelpunkts und den Radius des Kreises.
•Bitmap-Füllung

createPattern( img , Repeat-Style) verwendet Bildfüllung, Repeat-Style kann Repeat, Repeat-X, Repeat-Y, No-Repeat sein.

Der Effekt ist wie folgt:

var canvas = document.getElementById("canvas");   

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

      

        //线性渐变   

        var grd = context.createLinearGradient( 10 , 10, 100 , 350 );   

        grd.addColorStop(0,"#1EF9F7");   

        grd.addColorStop(0.25,"#FC0F31");   

        grd.addColorStop(0.5,"#ECF811");   

        grd.addColorStop(0.75,"#2F0AF1");   

        grd.addColorStop(1,"#160303");   

        context.fillStyle = grd;   

        context.fillRect(10,10,100,350);   

      

        //径向渐变   

        var grd = context.createRadialGradient(325 , 200, 0 , 325 , 200 , 200 );   

        grd.addColorStop(0,"#1EF9F7");   

        grd.addColorStop(0.25,"#FC0F31");   

        grd.addColorStop(0.5,"#ECF811");   

        grd.addColorStop(0.75,"#2F0AF1");   

        grd.addColorStop(1,"#160303");   

        context.fillStyle = grd;   

        context.fillRect(150,10,350,350);   

      

        //位图填充   

        var bgimg = new Image();   

        bgimg.src = "background.jpg";   

        bgimg.onload=function(){   

            var pattern = context.createPattern(bgimg, "repeat");   

            context.fillStyle = pattern;   

            context.strokeStyle="#F20B0B";   

            context.fillRect(600, 100, 200,200);   

            context.strokeRect(600, 100, 200,200);   

        };

Das Obige ist der Inhalt der grundlegenden Implementierung des HTML5-Canvas-Zeichnungsfüllstils. Weitere verwandte Inhalte Bitte beachten Sie die chinesische PHP-Website (www.php.cn)!