HTML5 Concise tutorial -1.1.4.html5canvas linear gradient createlineargradient of the reference manual

This article connects: http://blog.csdn.net/tomorrow13210073213/article/details/42453769

Reprint please indicate the source

HTML5 's canvas provides us with a gradient effect similar to the Linear-gradient attribute definition in CSS3, which allows you to create a linear gradient based on the canvas using the Createlineargradient () method, which creates a linear gradient that can be used to fill the path, Define strokes, and so on. At the same time, HTML5 also provided us with a createradialgradient () method for creating a radial gradient, which we'll cover in detail in another blog post.

Method: Createlineargradient ()

Method Name: Createlineargradient ()

Method Description: Used to create a linear gradient based on the entire canvas, which can be used to fill a path or define a stroke (as the value of an attribute FillStyle or Strokestyle)

JS Syntax: context.createlineargradient (X0,Y0,X1,Y1);
Parameter: x0: The x-coordinate of the start point of the gradient,
Parameter: y0: The y-coordinate of the start point of the gradient,
Parameter: X1: The x-coordinate of the gradient end point,
Parameter: y1: the y-coordinate of the gradient end point

Browser compatible: IE 9, Firefox, Opera, Chrome, and Safari support the Createlineargradient () method.

Note: (1) After getting the gradient object, we use the Addcolorstop () method to specify a different color and where to position the color in the gradient object. Another blog post is detailed on this approach.

(2) The gradient we define with the Createlineargradient () method is based on the entire canvas, and is not visible simply by defining the gradient, which is defined as the value of the property fillstyle or Strokestyle. We are actually showing the gradient of the path-defined rectangle (face or stroke), circle (face or stroke) section.

No more nonsense, here is the test code, JS comments have a description of the relevant test:

<! DOCTYPE html>
Here is the test:
(Pictures don't come up ah, csdn, let's test it yourself)

HTML5 Concise tutorial -1.1.4.html5canvas linear gradient createlineargradient of the reference manual