Canvas radial gradient details, canvas radial gradient

Canvas radial gradient details, canvas radial gradient
Follow these steps to create a radial gradient:

1. Create a radial gradient object createRadialGradient (x0, y0, r0, x1, y1, r1). x0, y0, r0 are the coordinates and radius of the Start circle, x1, y1 and r1 are the coordinates and radius of the ending circle.

2. Set the gradient color addColorStop (position, color) and position from 0.0 ~ The value between 1.0 represents the relative position of the gradient. color is a valid css color value.

3. Set the paint brush color to the radial gradient object.

4. Draw a picture.

Example:

Var c = document. getElementById ('mycanvas '). getContext ('2d ');
Var radial = c. createRadialGradient (100,100, 20,120,120, 50); radial. addColorStop (0, '# EE84AA'); radial. addColorStop (0.9, '# FF0188'); // color # FF0188 = rgba (,) radial. addColorStop (1, 'rgba (255, 1, 136, 0) '); c. fillStyle = radial; c. fillRect (0, 0, 500,500 );

The three-dimensional sphere is as follows.

 

In this simple step, you need to set at least three coordinates and radius. A combination of coordinates and radius may show strange shapes and at any time, how can we set the expected circle to appear? See the following experiment. Solution 1: Relationship between two circles when an object is created.On the basis of the above, if you change the code for creating an object to: radial = c. createRadialGradient (80, 80, 20,120,120, 50); // left or radial = c. createRadialGradient (100,100, 20,130,130, 50); // on the right, it is too far away from the circle, but it can be used as an arrow... How does this shape come from? This reminds me of a twitter logo image. Therefore, the Auxiliary Line goes up ~ After the code returns to the normal spherical shape and adds the guides, the Code is as follows:

Var c = document. getElementById ('mycanvas '). getContext ('2d '); var radial = c. createRadialGradient (100,100, 20,120,120, 50); radial. addColorStop (0, '# EE84AA'); radial. addColorStop (0.9, '# FF0188'); radial. addColorStop (1, 'rgba (255, 1, 136, 0) '); c. fillStyle = radial; c. fillRect (0, 0, 500,500); // The following is the added auxiliary line c. arc (100,100, 2 * Math. PI); c. moveTo (1, 170,120); c. arc (120,120, 50, 0, 2 * Math. PI); c. stroke ();

:

We can see that the starting circle is completely in the package of the ending circle. Change the position of the starting circle and its corresponding guides. The Code is as follows:

Var radial = c. createRadialGradient (80, 80, 20,120,120, 50); radial. addColorStop (0, '# EE84AA'); radial. addColorStop (0.9, '# FF0188'); radial. addColorStop (1, 'rgba (255, 1, 136, 0) '); c. fillStyle = radial; c. fillRect (0, 0, 500,500); // The following is the added auxiliary line c. arc (80, 80, 20, 0, 2 * Math. PI); c. moveTo (1, 170,120); c. arc (120,120, 50, 0, 2 * Math. PI); c. stroke ();

:

　

On the basis of the normal circle, change the position of the ending circle and its corresponding auxiliary line

Var radial = c. createRadialGradient (100,100, 20,130,130, 50); radial. addColorStop (0, '# EE84AA'); radial. addColorStop (0.9, '# FF0188'); radial. addColorStop (1, 'rgba (255, 1, 136, 0) '); c. fillStyle = radial; c. fillRect (0, 0, 500,500); // The following is the added auxiliary line c. arc (100,100, 2 * Math. PI); c. moveTo (1, 180,130); c. arc (130,130, 50, 0, 2 * Math. PI); c. stroke ();

:

　

Now let's look at the shapes. To make the effect more obvious, let's look at the following example:

Var radial = c. createRadialGradient (20,130,130, 50); radial. addColorStop (0, '# EE84AA'); radial. addColorStop (0.9, '# FF0188'); radial. addColorStop (1, 'rgba (255, 1, 136, 0) '); c. fillStyle = radial; c. fillRect (0, 0, 500,500); // The following is the added auxiliary line c. arc (70, 20, 0, 2 * Math. PI); c. moveTo (1, 180,130); c. arc (130,130, 50, 0, 2 * Math. PI); c. stroke ();

, So cute ~

　

There are also cases where the radius of the starting circle is greater than the radius of the ending circle. According to the above results, if the starting circle is not within the ending circle, the rendered part is the outer tangent of two circles and the conical shape of the ending circle. To become a circle, make sure that the starting circle is inside the ending circle. In addition, according to the html specification, if 1, r0, or r1 are negative, an error is returned. 2. If x0 = x1, y0 = y1, r0 = r1, the modification step is skipped and no painting is performed. Solution 2: Relationship between gradient and drawn images 　The above problems are avoided, but the drawing has these shapes: The first two problems are obvious and are truncated. If I tell you that the third one is truncated, will you believe it ~ The third one is indeed truncated, And it is truncated by a circle! Why is the image truncated? What are the precautions for drawing the image ~

To avoid interference with this problem, c. fillRect (500,500,) is set in the large colored area );

On the basis of the normal sphere, reduce the draw area to c. fillRect (500,150. So that the width and height are smaller than the c. fillRect (300,150,) in the Sphere area, the second case occurs. If the draw shape is circular, when the ball is within the drawing range, it is displayed as a normal spherical, similar to the normal situation in the question. If only part of the sphere is within the draw range, the following code is displayed:

Var radial = c. createRadialGradient (100,100, 20,120,120, 50); radial. addColorStop (0, '# EE84AA'); radial. addColorStop (0.9, '# FF0188'); radial. addColorStop (1, 'rgba (255, 1, 136, 0) '); c. fillStyle = radial; c. arc (80,100, 60, 0, 2 * Math. PI); c. fill (); // The following is the added auxiliary line c. moveTo (1, 170,120); c. arc (120,120, 50, 0, 2 * Math. PI); c. stroke ();

Guides:

The larger circle above is the drawing area, and the smaller area below is the radial gradient circle. The colored area is the intersection of two circles.

 

To sum up the above, use canvasGradient to draw a normal ball effect, follow the following points: 1. In the createRadialGradient () method, the start circle radius is smaller than the end circle radius. 2. The starting circle is completely within the range of the ending circle. 3. Terminate the circle within the drawing Area

 

Reference address:

Https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradienthttps://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-createradialgradient