Tutorial on using HTML5 Canvas to fill images with color and texture_html5 tutorial tips

Fill Color

Art is inseparable from color. Today we will introduce filling color and experience the charm of color.
There are two main types of fill colors:

1. Basic color
2. Gradient color (also divided into linear gradient and radial gradient)

Let’s look at them one by one.

Fill basic color
The Canvas fillStyle property is used to set the basic color and fill of the shape on the canvas. fillStyle uses simple color names. This looks very simple, for example:

JavaScript CodeCopy content to clipboard

1. context.fillStyle = "red";

The following is a list of sixteen available color string values ​​from the HTML4 specification. Since HTML5 does not modify the exclusive colors, HTML4 colors can be displayed correctly in HTML5.

All of these color values ​​can be applied to the strokeStyle and fillStyle properties.
Okay, let me summarize the method of filling basic colors: (can also be used for strokeStyle attribute)
(1) Use color string filling.

JavaScript CodeCopy content to clipboard

1. context.fillStyle = "red";

(2) Use hexadecimal digit string padding.

JavaScript CodeCopy content to clipboard

1. context.fillStyle = "#FF0000";

(3) Fill with hexadecimal digit string abbreviation.

JavaScript CodeCopy content to clipboard

1. context.fillStyle = "#F00";

(4) Use the rgb() method to set the color.

JavaScript CodeCopy content to clipboard

1. context.fillStyle = "rgb(255,0,0)";

(5) Use the rgba() method to set the color.
JavaScript CodeCopy content to clipboard

1. context.fillStyle = "rgba(255,0,0,1)";

The last parameter of this method is the alpha value, and the transparency range is 1 (opaque) ~ 0 (transparent).
(6) Use the hsl() method to set the color.

JavaScript CodeCopy content to clipboard

1. context.fillStyle = "hsl(0,100%,50%)";

HSL represents the color of the three channels of hue (H), saturation (S), and lightness (L).
(7) Use the hsla() method to set the color.

JavaScript CodeCopy content to clipboard

1. context.fillStyle = "hsla(0,100%,50%,1)";

The above 7 sentences of code are all filled with "#FF0000" in red.

Fill Gradient Shape
There are two basic options for creating a gradient fill on the canvas: linear or radial. Linear gradients create a horizontal, vertical, or diagonal fill pattern. Radial gradients create a radial fill from a center point. There are three steps to filling a gradient shape: add a gradient line, add a key color to the gradient line, and apply the gradient. Here are some examples of them.
Linear Gradient
Three Step Strategy:
Add Gradient Lines:

JavaScript CodeCopy content to clipboard

1. var grd = context.createLinearGradient(xstart,ystart,xend,yend);

Add a key color to the gradient line (similar to a color breakpoint):

JavaScript CodeCopy content to clipboard

1. grd.addColorStop(stop,color);

The stop here is a floating point number from 0 to 1, which represents the proportion of the distance from the breakpoint to (xstart, ystart) to the entire gradient length.

Apply gradient:

JavaScript CodeCopy content to clipboard

1. context.fillStyle = grd;
2. context.strokeStyle = grd;

Write a code to take a look.

JavaScript CodeCopy content to clipboard

2. "zh">
4. "UTF-8">
8. "canvas-warp">
9. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
10. Your browser doesn’t support Canvas? ! Change it quickly! !

<script> </script>

window.onload = function(){

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

canvas.width = 800;

canvas.height = 600;

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

context.rect(200,100,400,400);

 //Add gradient line

var grd = context.createLinearGradient(200,300,600,300);

 //Add color breakpoints

grd.addColorStop(0,"black");

grd.addColorStop(0.5,"white");

grd.addColorStop(1,"black");

 //Apply gradient

context.fillStyle = grd;

context.fill();

}