Article introduction of Wulin.com (www.vevb.com): The application of HTML5 Daily Training Canvas tag - Drawing radial gradient graphics.
We learned how to draw linear gradient graphs using Canvas, and today we will learn how to draw radial gradient graphs. Through the study of the last class, we know that drawing linear gradient graphs uses a very important function - createLinearGradiend();
If we want to draw a radial gradient we have a similar method as follows:
xStart: The horizontal axis of the gradient start point
yStart: The vertical coordinate of the gradient start point
xEnd: Gradient end point horizontal axis
yEnd: The vertical coordinate of the gradient end point
radiusStart: The radius of the circle that begins to change
radiusEnd: The radius of the circle ending in the gradient
Finally, we can draw a very beautiful gradient through the addColorStop method we learned in the last class. It also needs to set a floating point number between 0-1 as the offset of the gradient turning point.
The whole code case is the same as in the previous class, except: