DOCX

Canvas radial gradient explanation

By Jeremy Cunningham,2015-03-08 15:15
14 views 0
Canvas radial gradient explanation

    Create a radial gradient steps are as follows:

    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.

    3, set the brush color for the radial gradient object.

    4, drawing.

    Ex. :

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'); // #FF0188 == rgba(255,1,136,1)

     radial.addColorStop(1,'rgba(255,1,136,0)');

     c.fillStyle = radial;

     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:

    Radial = Arthur c. reateRadialGradient,80,20,120,120,50 (80);/ / the left rendering

    or

    Radial = Arthur c. reateRadialGradient,20,130,130,50 (100100);/ / on the right side of the rendering

    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');

     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);

     //

     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:

    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);

     //

     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

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);

     //

     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:

    var radial = c.createRadialGradient(70,70,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);

     //

     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:

    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();

     //

     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:

    1. CreateRadialGradient () method, the initial radius is less than the end of the round radius.

    2. The initial round completely within the scope of the termination of round

    3. The end circle in the drawing area

Report this document

For any questions or suggestions please email
cust-service@docsford.com