An analysis of PHP programmers need to understand HTML5 painting tags <canvas>

At present, HTML5 is still in great line, along with a lot of new code methods.

One of them is a game based on HTML5, such as a mini-game that is used to promote------a neuro-cat

Or can be downloaded separately run the pet elimination type game

Most of these mini-games are implemented by a new <canvas> tag of HTML5, which has its own programming interface (the canvas API), which is designed to draw graphics that can achieve a range of beautiful graphics and images. Create a better and richer new generation of Web pages, canvas tags for drawing images through the JavaScript canvas and scripts.

Let's take a look at the specific use of the canvas label, first we must have a canvas before drawing the image

First, create a canvas

<canvas id= "CANVAS1" width= "height=" >            </canvas>

The element is then fetched in the JavaScript script of the page

var canvas1 = document.getElementById (' canvas1 ');

You can then paint the canvas label in a JavaScript script

Canvas is like the following common properties

Canvas1.getattribute ("height")
Canvas1.getattribute ("width")
Gets the width and height of the current canvas, respectively

FillStyle Sets or returns the color, gradient, or pattern used to fill the drawing
Strokestyle Sets or returns the color, gradient, or pattern used for a stroke
Shadowcolor Sets or returns the color used for shadows
Shadowblur Sets or returns the level of blur used for shadows
SHADOWOFFSETX Sets or returns the horizontal distance of the shadow distance shape
Shadowoffsety Sets or returns the vertical distance of the shadow distance shape

Of course, painting requires brushes.

Second, get the brush operation

We need to get the brush context that belongs to this canvas, and everything in the future is done through this brush.

var canvas1 = document.getElementById (' canvas1 '); var ctx1 = Canvas1.getcontext (' 2d ');

Then use the DrawImage () method provided by the context to draw an image, canvas, or video on the canvas

// position the image on the canvas:context.drawimage (img,x,y); // position the image on the canvas and specify the width and height of the image:context.drawimage (img,x,y,width,height); // cut the image and position the clipped part on the canvas:context.drawimage (img,sx,sy,swidth,sheight,x,y,width,height);

Parameter description
IMG Specifies the image, canvas, or video to use.
SX is optional. The x-coordinate position at which to start clipping.
SY is optional. The y-coordinate position at which to start clipping.
Swidth is optional. The width of the image being clipped.
Sheight is optional. The height of the image being clipped.
x Place the x-coordinate position of the image on the canvas.
Y places the y-coordinate position of the image on the canvas.
width is optional. The width of the image to use. (stretching or shrinking the image)
Height is optional. The height of the image to use. (stretching or shrinking the image)

Next we'll draw a moving picture on canvas

var b_y=0; // The following chart of the vertical axis of the beginning of the 0 is right on the canvas//and then more and more down to move Down//above the map of the beginning of the ordinate is negative, so did not show//such as canvas height 568, wide 320//above the coordinates of the graph is negative 568          b_y-568// B_y is getting bigger and larger, b_y-568 is getting closer to the 0 above figure and getting down the function  drawbackground () {    ctx1. DrawImage (image,0,b _y,320,568);    Ctx1. DrawImage (image,0,b_y-568,320,568);    B_y+=4;     if (b_y>568) {        b_y=0;    }    Window. SetTimeout ("Drawbackground ()", +);

An analysis of PHP programmers need to understand HTML5 painting tags <canvas>