HTML5 Canvas Drawing--a basic tutorial on drawing graphics using canvas

Source: Internet
Author: User

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 line

The 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 box

In 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 rectangle

Gradients 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 circle

The 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.