0 Basic HTML5 Game Making Tutorial 2nd Chapter simple Drawing

Chapter II Drawing of Simple graphs

HTML5 supports drawing graphics directly on Web pages using canvas and SVG. SVG is suitable for drawing high-quality vector graphics, not suitable for playing games, so we do the game generally use canvas.

Since this tutorial is simple as the principle, so in the beginner stage please do not distract attention to the art, quality and other details, we only need to master the rectangle, polygon, circular and other simple graphics drawing, and these graphics programming, so that it has a certain degree of exercise and game effect.

(If you're lazy, you can even skip the drawing of polygons and circles in this chapter, just learn the rectangles, then go straight to the next chapter.) ）

One, the drawing of the rectangle

The format of the command is Context.fillrect (x,y,width,height)

Where the parameter x is the upper-left coordinate of the rectangle, y is the upper-right coordinate, width is the rectangle (pixel point), and height is the height of the rectangle (pixel point).

Before drawing, it is generally necessary to specify the color of the fill, and the default is black if not specified.

The order is context.fillstyle= "green";

For example, if you want to make a small green box, you can do this:

Context.fillstyle= "Green"; Context.fillrect (30,30,100,100);

It looks like this (). This is just a static block, and the next chapter will talk about how to get her to move.

Two, the drawing of the polygon
Polygons are slightly more complicated to draw than rectangles, because the canvas only provides a direct drawing of the rectangle's functions, and the other polygons draw their own lines in a single line.
5 functions are required, namely Context.beginpath (); Context.moveto (); Context.lineto (); Context.closepath (); Context.fill ();
The function functions are as follows:
Context.beginpath (); Used to start a new path
Context.moveto (); To move the canvas's current coordinates to a specified position
Context.lineto (); a segment used to draw a current point to a specified point
Context.closepath (); Used to connect the current point to the starting point, resulting in a closed graph
Context.fill (); for filling color.
Let's take the simplest polygon, the triangle as an example

Context.beginpath (); Context.moveto (100,100); Context.lineto (50,200); Context.lineto (150,200); Context.closePath () ; context.fillstyle= "Green"; Context.fill ();

Get the triangles like.

Three, round the drawing
In fact, the computer is drawing an arc, and finally through the Closepath ().
The function that needs to be used is Context.arc (x,y,r,sangel,eangel,countclockwise);
where x is the center axis, y is the center ordinate, R is the radius, the Sangel is the starting angle (in radians), the Eangel is the end angle (in radians), countclockwise is optional, specifies a clockwise or counterclockwise direction.
Draw a circle that lacks a corner, combining the drawing of a polygon.

Context.beginpath (); Context.arc (100,100,50,0,1.5*math.pi); Context.lineto (100,100); Context.closepath (); Context.fillstyle= "Green"; Context.fill ();

Such as:

0 Basic HTML5 Game Making Tutorial 2nd Chapter simple Drawing