HTML5 Tutorial: Canvas Tag Draws Linear Gradient Gradient Graphics

Article introduction of Wulin.com (www.vevb.com): The application of HTML5 daily training Canvas tag - drawing linear gradient graphics.

So far, the basic knowledge of drawing graphics using canvas has been introduced. Starting from this section, we will introduce one of the other more advanced drawing knowledge - linear gradient. First, let’s review the color fillStyle specified in "HTML5 Daily Practice: Application of Canvas Tags - Drawing Rectangles". When drawing a linear gradient, we need to use a new object - the LinearGradient object, and use the createLinearGradiend method of the graph context object to create the object. The definition of this method is as follows:

context.createLinearGradient(xStart, yStart, xEnd, yEnd);

xStart: The horizontal axis of the gradient start point

yStart: The vertical coordinate of the gradient start point

xEnd: Gradient end point horizontal axis

yEnd: The vertical coordinate of the gradient end point

By using this method, a LinearGradient object using two coordinate points is created. So how should the gradient color be set?

After we pass the LinearGradient object, we use the addColorStop method to set it. The example of this method is as follows:

context.addColorStop(offset, color);

Use this method to append the color of the gradient, which has two parameters:

offset: is the offset of the floating point number between 0-1 of the color leaving the gradient starting point, which sets the color to the offset from the beginning point of the gradient.

color: is the color used to set the drawing

Illustration of offset parameter in addColorStop method