DOCX

By Jeremy Cunningham,2015-03-08 15:15
17 views 0

1, create a radial gradient object createRadialGradient (x0, y0, r0, x1, y1, r1), including x0, y0, r0starting the coordinates and radius of circle, respectively, the x1, y1, r1 to end coordinates and radius of the circle.

2, set the gradient color addColorStop (position, color), the value of the position is between 0.0 ~ 1.0, the gradient of the relative position;Color is a valid CSS color values.

4, drawing.

Ex. :

var c = document.getElementById('mycanvas').getContext('2d');

c.fillRect(0,0,500,500);

Renderings as follows, the three-dimensional sphere.

This simple step you need to set at least three coordinates and radius, the different combination of the coordinates and radius there will be a strange shape, when there will be a strange shape, how to set up appear round we want?Look at the following test.

Solution 1: create the object, the relationship between two circles.

On the basis of above, if the object creation code is changed to:

or

Rendering, and circular difference too far, can do the arrow effect...

This shape come from?Reminds me of a picture of a twitter logo at this moment, maybe it is.So, auxiliary line ~ to go

Code back to normal spherical effect, and adding auxiliary line, after the code is as

follows:

var c = document.getElementById('mycanvas').getContext('2d');

c.fillRect(0,0,500,500);

//

c.arc(100,100,20,0,2*Math.PI);

c.moveTo(170,120);

c.arc(120,120,50,0,2*Math.PI);

c.stroke();

Effect:

You can seestarting from rendering round completely at the end of round the parcel.

Change the position of thestarting circle and its corresponding auxiliary line, the code is

as follows:

c.fillRect(0,0,500,500);

//

c.arc(80,80,20,0,2*Math.PI);

c.moveTo(170,120);

c.arc(120,120,50,0,2*Math.PI);

c.stroke();

Effect:

On the basis of normal ball, change over circle and its corresponding auxiliary line

position

c.fillRect(0,0,500,500);

//

c.arc(100,100,20,0,2*Math.PI);

c.moveTo(180,130);

c.arc(130,130,50,0,2*Math.PI);

c.stroke();

Effect:

Now look at the shape is not so strange.

In order to make the effect more apparent, in an chestnuts:

c.fillRect(0,0,500,500);

//

c.arc(70,70,20,0,2*Math.PI);

c.moveTo(180,130);

c.arc(130,130,50,0,2*Math.PI);

c.stroke();

Rendering, so express ~

Andstarting circle radius is greater than the end of the circle radius, no longer, for example, one by one.

According to the above effect, if the initial round circle is not ended, part be rendered into two circle tangent and end outside the circle of the cone.

If you want to become a round, need to ensure thatstarting circle at the end circle inside.

In addition, according to the HTML specification:

1, r0 or r1 is negative, complains.

2, if the x0 = x1, y0 = y1, r0 = r1, change will skip steps, without drawing.

Solution 2: gradient and draw graphics

The above problems are avoided, but drawing these shape:

The first two problems are obvious, it is truncated.If tell you third and truncated, you will not believe ~

The third is truncated, the circular truncated!

Why will be truncated, speak the plot yes note ~

Solution to avoid this problem in the process of 1, set up big shading area c.f illRect,0,500,500 (0);

On the basis of normal ball, reduce drawing area c.f illRect,0,500,150 (0), appeared in the first case.

Make the width and height is less than the ball area c.f illRect,0,300,150 (0), then in the second case.

If the draw for the round shape, when the ball within the scope of the map, is displayed

as normal spherical, similar to the one normal situation.

If the ball only part of the drawing, will appear above 3, the following code:

c.arc(80,100,60,0,2*Math.PI);

c.fill();

//

c.moveTo(170,120);

c.arc(120,120,50,0,2*Math.PI);

c.stroke();

Assist line rendering:

The larger circle as the drawing area, the dot is radial gradient circle.Shading area is part of the two circles intersect.

All the above, draw a normal ball effect, use canvasGradient shall comply with the following: