Home > Developer > JavaScript
Because these two years HTML5 fire's positive heat, therefore studied a bit, recently had an idea also to use the related function which the HTML, therefore also must study well.
Take a good look at the function of canvas, feel HTML5 in the client interactive function more and more strong, today looked at the canvas drawing, below is a few examples, write down for later use.
1, using canvas to draw a straight line:
<!doctype html>
The two API methods used here, MoveTo and LineTo are the starting and ending coordinates of the segments, the variables are (x coordinates, y coordinates), Strokestyle, stroke respectively, and the path draws the style and the drawing path.
2, draw the gradient line
Gradient lines are colors that have a gradient effect, and of course the style of the gradient can follow the direction of the path or not follow the direction of the path:
<!doctype html>
3. Draw a rectangle or square:
This rectangle box if the use of HTML4 can only use the background code to generate, now HTML5 provides the canvas function is very easy to draw, so the superiority of HTML5 is quite high.
<!doctype html>
Here's a method--fillrect () Literally can also know that this is filled with a rectangle, where the parameters are worth explaining FillRect (X,y,width,height), this is not the same as the mathematical coordinates, please see
Here the x,y is relative canvas the beginning of the upper left corner, remember!!
4. Draw a simple rectangular frame
In the example above, we're going to draw a rectangular block and fill the color, and this example simply draws a rectangle without the fill effect.
<!doctype html>
This is very simple, as in the example, is to replace fill with stroke, detailed in the example above.
5, draw a linear gradient of the rectangle
Gradients are a fairly good effect of padding, combining instance 2 and instance 3, we can create a gradient rectangle
<!doctype html>
Do not explain, remember FillRect (x,y,width,height) on the line.
6. Fill a circle
The circle uses a wide range of course, including ellipses.
<!doctype html>
The Arc method here uses Arc (x,y,radius,startangle,endangle,anticlockwise), which means (center X coordinates, center Y coordinates, RADIUS, start angle (radians), end angle radians, and whether to draw clockwise);
Comparison of each parameter in arc:
A, Cans.arc (200,150,100,0,math.pi,true);
C, Cans.arc (200,150,100,0,math.pi/2,true); [/code]
C, Cans.arc (200,150,100,0,math.pi/2,true);
D, Cans.arc (200,150,100,0,math.pi/2,false);
7. Round Block
<!doctype html>
This is not explained here, as with the example above, the linewidth is the width of the control line.
8. Circular Gradient
<!doctype html>
What needs to be explained here is the Createradialgradient method, which has a parameter (xstart,ystart,radiusstart,xend,yend,radiusend), that is, it uses two circles when it implements a gradient, and one is the original circle, One is a gradient circle, in fact, this way through the coordinates and RADIUS control can achieve a lot of styles, such as
Stereo Circle
var gnt = cans.createradialgradient (200,150,0,200,50,250); Gnt.addcolorstop (0, ' red '); Gnt.addcolorstop (1, ' #333 ');
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
