H5 tank battle with a tank of paint

Today is a special day, Christmas, but also the weekend, here first wish you a Merry Christmas! Festive days, we can relax a little, pull a tug yesterday Thunder battle Celtic game, this game Big Granville and Double 叒 Corporation win three pairs, and is a 45+11+11 super three pairs, in fact, Little Thomas's performance also comparable more let, scored 31 points 9 assists, The stub began to play a wave of small climax to the score, but master the last few minutes of the violent walk away from the game, let a person directly call wonderful.　　Okay, we'll get to the point when we're done. What we bring to you today is a more playful thing--h5 tank wars. This is the realization of the main use of the H5 canvas and the original JS, if you are already Daniel, that I suggest now start can be isolated five, after all, the author is still in the rush to big Niu Cun Road, if you are a novice foundation weak, then also please do not leave, the author will be very wordy, As far as possible to write a beginner can also understand the code (haha so scheming a foreshadowing, who also dare to say that the code level is not enough!) ）。 1. First make the plot area, as the battlefield of the tank

<id= "Floor"  width= "800px"  height= "500px" ></ Canvas >

Let's give a black background color and let it center (if you're interested in centering on various kinky tricks, welcome to my first blog-"11 ways to implement CSS vertically," Click here to transfer http://www.cnblogs.com/zhouhuan/p/ vertical_center.html).

{    background:#000;     position: absolute;     top: 50%;     Left:50%;     Transform:translate ( -50%, -50%);}

The results are as follows: for the canvas canvas, the width and height written in the style are not equivalent, and the width height written in the style is the pixel width that is actually displayed in the page, And write in the properties of the wide height is the context of the environment wide (some small partners may temporarily have no concept of the context, it does not matter, if you can not understand the time to do this, follow the author's thoughts, will speak after the context and then come back to try it will have some experience), Both of the default values are 300px 150px, if the width of the style is changed to 800px 500px, then it is equivalent to the context of the 300px 150px in the reality of the 800px 500px, will cause the painting to become blurred, and may appear distorted, So generally to maintain the style width and height of the same as the property width, in fact, generally do the words set a property width and height to determine the size of the canvas can be. 2. Next, draw the graphic on the canvasThe canvas element itself is not capable of drawing, and all the drawing work must be done through JavaScript. ① Here we first give a demo of a straight line and then do it to explain:

var mycanvas = document.getElementById (' floor '); var cxt = Mycanvas.getcontext (' 2d '); Cxt.moveto (50,50); Cxt.lineto (50,200= ' #fff '; Cxt.stroke ();

The results are as follows:

The first step, var MyCanvas = document.getElementById (' floor '); Everyone should understand that getting the canvas element and getting the canvas element is because it needs to be used in the second step.

The second step, var cxt = Mycanvas.getcontext (' 2d '); The purpose of this step is to create an environment that is plotted in the plot area (which I generally visualize as creating a brush on the current canvas), in which the definition in the document is: the GetContext () method returns an environment for drawing on the canvas. Let's take a look at the further explanation in the documentation: the parameter in this method specifies the type that you want to draw on the canvas, and the only legal value that is currently unique is "2d", which specifies a two-dimensional drawing, and causes this method to return an environment object that exports a two-dimensional drawing API in the future if <canvas > tag extension to support 3D plotting, the GetContext () method may allow a "3d" string parameter to be passed.　　The GetContext () method returns a Canvasrenderingcontext2d object that can be used to draw a graphic into a Canvas element. The third step, Cxt.moveto (50,50);　　This step has begun to draw a straight line, the MoveTo () method is used to set the current position (50,50) and to start a new sub-path. Fourth step, Cxt.lineto (50,200); Adds a line segment to the current sub-path.　　Here the explanation may be a bit around, you see the literal meaning of the word may be more clear: MoveTo is to move the origin of the sub-path to a location, LineTo is the sub-path to always reach a certain location that is the end of course. Fifth Step, Cxt.strokestyle = ' #fff ';　　Set the color of the brush to white, where there is no excess to explain. Sixth step, Cxt.stroke ();　　This step is better understood by drawing a line in the previous steps. OK, that step, our first straight line was drawn! Scatter the flowers! ② Next, let's look at another example of a triangle, and still give the code and the result, and then explain it to you:

var mycanvas = document.getElementById (' floor '); var cxt = Mycanvas.getcontext (' 2d '); Cxt.beginpath (); Cxt.moveto (50,50); Cxt.lineto ( 50,200); Cxt.lineto (200,200= ' #fff '; Cxt.stroke ();

The results are as follows:

Only Beginpath () and Closepath () are not used here before. Beginpath () Method: Discards any currently defined path and begins a new path; Closepath () Method: If the child path of the canvas is open, the Closepath () method closes it by adding a segment to the current point and sub-path start point. But if the subpath is closed, the method doesn't do anything.　　Once the sub-path is closed, no more lines or curves can be added to it. The above code can also be modified to:

var mycanvas = document.getElementById (' floor '); var cxt = Mycanvas.getcontext (' 2d '); Cxt.beginpath (); Cxt.moveto (50,50); Cxt.lineto ( 50,200); Cxt.lineto (200,200= ' #fff '; Cxt.fill ();

The result is:

The FillStyle property is similar to the previously used Strokestyle, which modifies the fill color, both of which are black, and the Fill () method to fill the interior of the current path, which is also very well understood, because fill is the meaning of padding. ③ The third example is the drawing of a rectangleOf course, it can be like before we draw a triangle, we set the path step-by-step, set up and then draw or fill, but this method is more troublesome, error-prone, not recommended. The Canvasrenderingcontext2d object has a method for drawing rectangles directly, FillRect () and Strokerect ():

var mycanvas = document.getElementById (' floor '); var cxt = Mycanvas.getcontext (' 2d '= "#fff"; Cxt.strokerect (20,20,50,100= "#fff" ; Cxt.fillrect (80,20,50,100);

Both methods have four parameters (x, y, width, height), the first two are the coordinates of the upper-left corner of the rectangle, and the latter two are the width and height of the rectangle. ④ Draw a circle

varMyCanvas = document.getElementById (' Floor ');varCXT = Mycanvas.getcontext (' 2d '); Cxt.fillstyle= "Orange";//First semicircleCxt.beginpath (); Cxt.arc (100,100,50,0,math.pi,true); Cxt.closepath (); Cxt.fill ();//roundCxt.beginpath (); Cxt.arc (210,100,50,0,2*math.pi,false); Cxt.closepath (); Cxt.fill ();//Second semicircleCxt.strokestyle = "Red"; Cxt.beginpath (); Cxt.arc (320,100,50,0,math.pi,false); Cxt.closepath (); Cxt.stroke ();

The results are as follows:

The arc () method uses a center point and radius to add an arc to the current subpath, which passes six parameters (x, y, radius, startangle, Endangle, counterclockwise), representing the x-coordinate of the center, the y-coordinate of the center, and the radius of the circle. , start angle, end angle, clockwise or counterclockwise.　　Where two angles are measured in radians, the last parameter true indicates counterclockwise, and False indicates clockwise. Here is a suggestion, before the arc () method with Beginpath (0 start path, the method followed by the Closepath () end path, otherwise it may appear and other graphics affect each other situation.　　When drawing other graphics, it is also important to note that only rectangles do not. There are a few notes about the angle parameter: the default x-axis positive half axis is 0, and increases in the counterclockwise direction. The Math.PI used above means that the Π,math object in mathematics is ECMAScript an object that is provided for the preservation of mathematical formulas and information, and that the object has many other properties that are very convenient to use, such as MATH.E, which represents the base of the natural logarithm, which is the value of the constant E. ⑤ Writing on the canvas

var mycanvas = document.getElementById (' floor '); var cxt = Mycanvas.getcontext (' 2d '= "#F21C9D"= "50px Simhei"; Cxt.filltext ("Merry Christmas! ", 30,100);

Results:

The Filltext () method is used to write on the canvas, the first parameter passes a string, the last two parameters are the coordinates of the upper left corner, and Cxt.fillstyle is used to set the color of the font; 　　Cxt.font is used to set the size and font, the size of the value and the value of the font is separated by a space, the two are not valid when writing one. ⑥ painting pictures

var mycanvas = document.getElementById (' floor '); var cxt = Mycanvas.getcontext (' 2d '); var New  = "Images/soldier.png"function() {    cxt.drawimage (myimg,60,20,680,454 );};

The results are as follows:

There are several steps to drawing a picture: var myimg = new Image (); Create an Image object; myimg.src = "Images/soldier.png";　　Specifies the path to the picture; myimg.onload = function () {cxt.drawimage (myimg,60,20,680,454);　　}; After loading the picture, use the DrawImage () method to draw, the method to pass four parameters (x, y, width, height), respectively, the image of the upper left corner of the x-coordinate, y-coordinate, the width of the picture, the height of the picture, and height can also be unspecified, not specified will be displayed as the original size of the picture 3. After mastering these methods, we can easily draw a simple tank, and we'll draw a tank with the Lakers ' main color:

varMyCanvas = document.getElementById (' Floor ');varCXT = Mycanvas.getcontext (' 2d '); Cxt.fillstyle= "#542174"; Cxt.fillrect (350,400,20,65);//the track on the left of the tankCxt.fillrect (420,400,20,65);//the crawler on the rightCxt.fillrect (373,410,44,50);//the middle bodyCxt.fillstyle = "#FCB827"; Cxt.beginpath (); Cxt.arc (395,435,16,0,2*math.pi,false);//the round cover on the main bodyCxt.closepath (); Cxt.fill (); Cxt.strokestyle= "#FCB827"; Cxt.linewidth= "8.0"; Cxt.moveto (395,435);//Barrel StartCxt.lineto (395,375);//End of BarrelCxt.stroke ();//painting a barrel

The results are as follows: The LineWidth property is used to set the line width drawn by the brush, the default value is 1.0, the value must be greater than 0, the wider line is centered on the path, and each side occupies half the width of the line.　　Here explain why do not draw a picture of the tank, and to such a lot of trouble to the result also painted a huge ugly tank, this is because if the direct use of the picture will be very CPU-consuming, performance is not high, the tank may even appear when running up, but if it is the tank of their own painting will not have such a problem. (Note: Part of the content is referenced from the Hanshunping teacher's tank war) A person's strength is limited after all, if the reading process found to describe improper or wrong place, welcome to correct me, I would be grateful!

H5 tank battle with a tank of paint