HTML5 Progressive Realization

Gradient

The context object can create a gradient object through the Createlineargradient () and Createradialgradient () two methods. The prototypes for these two methods are as follows:

Object createlineargradient (x1, y1, x2, y2);

Creates a linear gradient object from (x1, y1) points to (x2, y2) points.

Object createradialgradient (x1, y1, R1, x2, y2, r2);

Creates a radial gradient object from a circle with a radius of (x1, y1) points, R1 to a circle with a (x2, y2) point, and a radius of R2.

After the gradient object is created, you must use its addcolorstop () method to add color, and the prototype of the method is as follows:

void Addcolorstop (position, color);

Where position represents the color. The value range is [0, 1],0 is the starting point, 1 is the end point, and color represents the added colors, and the value can be whatever CSS color value.

After the gradient object is created and configured, it can be assigned to the Strokestyle property or FillStyle property of the context object, and the drawing will have the desired gradient effect.

Let's take a look at the following example:

<! DOCTYPE html><meta charset="Utf-8"><title></title><styletype="Text/css">Canvas{ Left:  -%; position:relative; Margin-left: -200px; Top;}</style><body><canvas id="Drawdiagonal" width=" the" height="a" style="border:1px solid #008B8B;"></canvas></body><scripttype="Text/javascript">var Canvas=Document.getElementById(' drawdiagonal ');var CD=Canvas.GetContext(' 2d ');CD.Save();CD.Translate(-Ten, -);CD.Beginpath();CD.MoveTo(0,0);CD.Quadraticcurveto( the,- the,260,- the);CD.Quadraticcurveto(310,- -,410,- -);CD.Strokestyle=' #663300 ';CD.linewidth= -;CD.Stroke();CD.Restore();var LG = CD.createlineargradient( the, -, -,  $); //Can try to change the number of references here.     Change the different effects.         LG.Addcolorstop(0, ' Yellow ');              LG.Addcolorstop(0.9, ' #3CB371 ');         LG.Addcolorstop(1,' #2E8B57 ');        CD.FillStyle=LG;//Attach the Set color value to the CD.                CD.Strokestyle =' Yellowgreen ';CD.linewidth=4;CD.LineJoin=' Round 'CD.Beginpath();CD.MoveTo( $, +);CD.LineTo( the, -);CD.LineTo(185, -);CD.LineTo(145, the);CD.LineTo( the, the);CD.LineTo(135, -);CD.LineTo( the, -);CD.LineTo( the, the);CD.LineTo(235, the);CD.LineTo( -, -)CD.LineTo(260, -);CD.LineTo(225, the);CD.LineTo( -, the);CD.LineTo( About, -);CD.LineTo(235, -);CD.Closepath();CD.Fill();CD.Stroke();</script>

The effect, for example, is as seen in:

Everybody tried to try a little bit!

There is no clear place to be able to communicate with each other.

Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.

HTML5 Progressive Realization