Fill style implementation for HTML5 canvas Basic Drawing, html5canvas

Fill style implementation for HTML5 canvas Basic Drawing, html5canvas

<Canvas> </canvas>It is a new label added in HTML5 for drawing graphics. In fact, this label is the same as other labels. Its special feature is that this label can obtain a CanvasRenderingContext2D object, we can use JavaScript scripts to control this object for plotting.

<Canvas> </canvas>It is just a container for drawing graphics. In addition to attributes such as id, class, and style, there are also attributes of height and width. There are three steps to draw an element on the <canvas> element:

1. Obtain the DOM object corresponding to the <canvas> element. This is a Canvas object;
2. Call the getContext () method of the Canvas object to obtain a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for plotting.

Fill Style

In addition to color settings, fillStyle and strokeStyle can be used to set other fill styles. Here, fillStyle is used as an example:

• Linear gradient

Procedure
(1) var grd = context. createLinearGradient (xstart, ystart, xend, yend) to create a linear gradient, set the start coordinate and end coordinate;
(2) grd. addColorStop (stop, color) adds a color for the linear gradient, stop is 0 ~ 1 value;
(3) context. fillStyle = grd is assigned to context.

• Radial Gradient
This method is similar to the linear gradient method, but 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 circle radius, the coordinates of the ending center, and the circle radius.

• Bitmap Filling
CreatePattern (img, repeat-style) is filled with images. repeat-style can be repeat, repeat-x, repeat-y, and no-repeat.

Copy the content to the clipboard using JavaScript Code

1. Var canvas = document. getElementById ("canvas ");
2. Var context = canvas. getContext ("2d ");
4. // Linear gradient
5. Var grd = context. createLinearGradient (10, 10,100,350 );
6. Grd. addColorStop (0, "#1EF9F7 ");
7. Grd. addColorStop (0.25, "# FC0F31 ");
8. Grd. addColorStop (0.5, "# ECF811 ");
9. Grd. addColorStop (0.75, "#2F0AF1 ");
10. Grd. addColorStop (1, "#160303 ");
11. Context. fillStyle = grd;
12. Context. fillRect (10, 10, 100,350 );
14. // Radial gradient
15. Var grd = context. createRadialGradient (325,200, 0,325,200,200 );
16. Grd. addColorStop (0, "#1EF9F7 ");
17. Grd. addColorStop (0.25, "# FC0F31 ");
18. Grd. addColorStop (0.5, "# ECF811 ");
19. Grd. addColorStop (0.75, "#2F0AF1 ");
20. Grd. addColorStop (1, "#160303 ");
21. Context. fillStyle = grd;
22. Context. fillRect (350,350, 10 );
24. // Bitmap Filling
25. Var bgimg = new Image ();
26. Bgimg. src = "background.jpg ";
27. Bgimg. onload = function (){
28. Var pattern = context. createPattern (bgimg, "repeat ");
29. Context. fillStyle = pattern;
30. Context. strokeStyle = "# F20B0B ";
31. Context. fillRect (600,100,200,200 );
32. Context. strokeRect (600,100,200,200 );
33. };

The effect is as follows:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.