Home > Developer > Web Develop
HTML5 Fire is hot, there is a recent idea is to use the relevant functions of HTML, so also to learn a good.
Take a good look at the canvas function, feel HTML5 in the client interaction is becoming more and more powerful, today looked at canvas drawing, below is a few instances, write down for later use.
1. Draw a line using canvas:<!doctype html> Cans.moveto (20,30);//First starting point Cans.lineto (120,90);//second point Cans.lineto (220,60);// The third point (starting with the second point) cans.linewidth=3; Cans.strokestyle = ' red '; Cans.stroke (); } </script> <body onload= "pageload (); > <canvas id= "can" width= "400px" height= "300px" >4</canvas> </body>The two API methods used here, MoveTo and LineTo are the start and end coordinates of the segment, respectively (x-coordinate, y-coordinate), Strokestyle, stroke-path drawing style and drawing path respectively.
2. Draw the gradient lineThe gradient line is the color has a gradient effect, of course, the gradient style can follow the direction of the path can also not follow the direction of the path:
<!doctype html>var gnt1 = cans.createlineargradient (0,0,400,300);The starting and ending coordinates of a linear gradientgnt1.addcolorstop (0, ' red ');Create a start color for the gradient, 0 for the offset, a personal understanding of the relative position on the line, a maximum of 1, a gradient in which you can write any of the gradient colorsgnt1.addcolorstop (1, ' Yellow ');cans.linewidth=3;Cans.strokestyle=gnt1;Cans.stroke (); } </script> <body onload= "pageload ();" > <canvas id= "can" width= "400px" height= "300px" >4</canvas> </body>3. Draw a rectangle or square:This kind of rectangle box if use HTML4 can only use the background code to generate, now HTML5 provides the canvas function to be able to draw easily, therefore said HTML5 superiority is quite high.
<!doctype html> = ' yellow '; Cans.fillrect (30,30,340,240); } </script> <body onload= "pageload (); > <canvas id= "can" width= "400px" height= "300px" >4</canvas> </body>Here is a method--fillrect () from the literal meaning can also know that this is to fill a rectangle, here the parameters are worth explaining fillRect (X,y,width,height), this and the coordinates of mathematics is not the same, specifically, see
Here the X, Y is relative to the top left corner of the canvas start, remember!!
4. Draw a simple rectangular boxIn the example above, to draw a rectangular block filled with color, this example simply draws a rectangle without the fill effect.
<!doctype html> = ' red '; Cans.strokerect (30,30,340,240); } </script> <body onload= "pageload (); > <canvas id= "can" width= "400px" height= "300px" >4</canvas> </body>This is very simple, as in the example above, is to replace fill with a stroke, as detailed in the above example.
5. Draw a linear gradient rectangleGradients are a pretty good effect of padding, combined with example 2 and instance 3, we can create a gradient rectangle
<!doctype html>var gnt1 = cans.createlineargradient (10,0,390,0); Gnt1.addcolorstop (0, ' red '); Gnt1.addcolorstop (0.5, ' green '); Gnt1.addcolorstop (1, ' Blue '); Cans.fillstyle = gnt1; Cans.fillrect (10,10,380,280); } </script> <body onload= "pageload (); > <canvas id= "can" width= "400px" height= "300px" >4</canvas> </body>Do not explain, remember FillRect (x,y,width,height) on the line.
6. Fill a circleThe circle is widely used and of course includes an ellipse.
<!doctype html> Cans.beginpath (); Cans.arc (200,150,100,0,math.pi*2,true); Cans.closepath (); Cans.fillstyle = ' green ';//originally used here is red, a look, dumbfounded, afraid of the street by the Patriot Dozen Ah, in fact you understand ~ ~ Cans.fill (); } </script> <body onload= "pageload (); > <canvas id= "can" width= "400px" height= "300px" >4</canvas> </body>The Arc method used here is arc (x,y,radius,startangle,endangle,anticlockwise), meaning (center X coordinate, center Y coordinate, radius, start angle (radians), end angle radian, whether to draw clockwise);
Comparison of the parameters in Arc:
A, Cans.arc (200,150,100,0,math.pi,true);C, Cans.arc (200,150,100,0,math.pi/2,true);
C, Cans.arc (200,150,100,0,math.pi/2,true);
D, Cans.arc (200,150,100,0,math.pi/2,false);
7. Circular Block
<!doctype html>Cans.beginpath (); Cans.arc (200,150,100,0,math.pi*2,false); Cans.closepath (); Cans.linewidth = 5; Cans.strokestyle = ' red '; Cans.stroke (); } </script> <body onload= "pageload (); > <canvas id= "can" width= "400px" height= "300px" >4</canvas> </body>This is not explained here, as with the example above, LineWidth is the width of the control line.
8. Circular Gradient<!doctype html>var gnt = cans.createradialgradient (200,300,50,200,200,200); Gnt.addcolorstop (1, ' red '); Gnt.addcolorstop (0, ' green '); Cans.fillstyle = GNT; Cans.fillrect (0,0,800,600); } </script> <body onload= "pageload (); > <canvas id= "can" width= "800px" height= "600px" >4</canvas> </body>Here is the Createradialgradient method, the parameters are (xstart,ystart,radiusstart,xend,yend,radiusend), that is, it in the implementation of the gradient, the use of two circles, one is the original circle, One is a gradient circle, in fact, this way through the coordinate and radius control can achieve a lot of styles, such as
Solid Circle
var gnt = cans.createradialgradient (200,150,0,200,50,250); gnt.addcolorstop (0, ' red '); Gnt.addcolorstop (1, ' #333 ');HTML5 Canvas Drawing--a basic tutorial on drawing graphics using canvas
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
