HTML5 canvas basic drawing fill style implementation

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b is a new tag in HTML5, used to draw graphics. In fact, this tag is the same as other tags. The special thing is that this tag can Get a CanvasRenderingContext2D object, we can control the object for drawing through JavaScript script.
5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b is just a container for drawing graphics. In addition to attributes such as id, class, style, etc., it also has height and width attributes. There are three main steps for drawing on the 5ba626b379994d53f7acf72a64f9b697> element:
1. Get the DOM object corresponding to the 5ba626b379994d53f7acf72a64f9b697 element, which is a Canvas object;
2. Call the getContext() method of the Canvas object, Get a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for drawing.
Fill style
In addition to setting the color, the fillStyle and strokeStyle used previously can also set other fill styles. Here we take fillStyle as an example:
•Linear Gradient
Use steps
(1) var grd = context.createLinearGradient( xstart , ystart, xend , yend ) to create a linear gradient and set the starting and end coordinates;
(2) grd.addColorStop( stop, color) adds color to the linear gradient, stop is a value of 0~1;
(3) context.fillStyle=grd will be assigned to context.
•Radial gradient
This method is similar to the linear gradient, except that the parameters received in the first step are different
var grd = context.createRadialGradient(x0, y0, r0, x1 , y1 , r1 ); receives the coordinates of the starting center and the radius of the circle and the coordinates of the ending center and the radius of the circle.
•Bitmap filling
createPattern(img, repeat-style) uses image filling, repeat-style can be repeat, repeat-x, repeat-y, no-repeat.

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);   

        };

The effect is as follows:

The above is the content of the fill style implementation of basic HTML5 canvas drawing. Please pay attention to more related content. PHP Chinese website (m.sbmmt.com)!