Canvas using gradient-Radial gradient detail

Create a radial gradient using

Createradialgrdient (X0,Y0,R0,X1,Y1,R1)?

Altogether? Six parameters, respectively, represent:

The center coordinate of the starting point (the first and second parameters),

The radius of the starting garden (the third parameter),

The center coordinate of the end point (fourth and fifth parameters),

The center radius of the end point (sixth parameter)?

The method returns a Canvasgradient object that defines the Addcolorstop method.

Addcolorstop (,);

Two parameters, the first is where you want to add a color, and the second is the solid color you want to add.

code example:

1 varCTX = document.queryselector (' canvas '). GetContext (' 2d '));2 3 varGrad = Ctx.createradialgrdient (250,70,20,200,60,100);4 5Grad.addcolorstop (0, ' red ');6 7Grad.addcolorstop (0.5, ' green ');8 9Grad.addcolorstop (1, ' Blue ');Ten  One   A  -Ctx.fillstyle =Grad; -  theCtx.fillrect (0,0,500,140);

In this example, the starting circle is smaller, surrounded by the end circle, and when we add color to the gradient, they are placed on a segment between the start circle boundary and the end circle boundary. Is between 0-1 of the addcolorstop inside.

So we can specify the position of the two circles, so the distance between the circle boundaries may change, and the color ramp speed may be different.

Note: When you set the two circle does not have the inclusion relationship to be careful, different browsers for how to start the gradient existence inconsistency, the result is also very confusing.

Can be combined with another article, "Canvas uses gradient-linear gradient detail" to read comprehension together.

Canvas using gradient-Radial gradient detail