HTML5Canvas game development (I) Basic knowledge-suvllian

HTML5Canvas game development (I) Basic knowledge-suvllian 1. Draw basic Images

Each time you use the canvas, there are several steps as a "routine"

1. Create a Canvas in HTML:

 
  
The browser does not support canvas.
  
 

2. Get the canvas tag and get a 2D Object:

Var c = document. getElementById ('mycanvas '); // obtain the label var ctx = c. getContext ("2d"); // returns an environment used to draw the environment type and returns a 2D Object, which implements most of the methods used by a canvas.

1. draw lines:

Ctx. lineWidth = 10; // set the line width ctx. strokeStyle = "red"; // sets the line color ctx. beginPath (); // create a new path ctx. moveTo (10, 10); // move the cursor position of the paint brush to ctx at the coordinate (10, 10. lineTo (); // move the paint brush to the ctx at the coordinate (, 50. stroke (); // start to draw the defined path

　　You can use ctx. lineCap = "butt" to set the line shape. Three values are available: butt, round, and square.

　　2. Draw a hollow rectangle:

Md5.strokeRect (100,100,200,240); // draws a hollow rectangle function. The four parameters indicate the start point X, Y coordinate, rectangular length, and rectangular width, respectively.

3. Draw a solid rectangle:

Method 1: Use the fillRext () function. You can use fillStyle to set the color of a solid rectangle.

Method 2:

md5.rect(10,10,70,40);md5.fill();

4. Circle:

Use the arc () function to draw an arc. There are six parameters: arc center X, Y coordinate, arc radius, start angle, end

End angle, whether it is counter-clockwise. You can call the fill () function to draw a solid circle.

5. Draw a rounded rectangle:

You can use the arcTo function to draw a rounded rectangle. There are five parameters: radius of X, Y, and P2 of P1, and radius of the arc.

6. Erase the Canvas:

ClearRect () function. Four parameters: X, Y, length, and width.

7. drawing is complex: Two-Dimensional besell curve and three-dimensional besell curve.

8. Use the clip () function to plot in a specified area.

9. Draw a custom image.

　　Ii. Draw text

　　1. cxt. font: Set the font style.

Ctx. font = "30px Arial"; // set the text size and font style, font size, and italic effect.

2. cxt. strokeText (): set text content.Hollow text!There are four parameters: text string, coordinate X, coordinate Y, and text width. The last parameter can be omitted. When saving the time, the text width is automatically set to the width of the entire text.

Ctx. strokeText ("Hello World",); // set text content

3. cxt. fillText (): set text content.Solid text!The parameter is the same as strokeText ();

4. ctx. textAlign = ""; set the text alignment mode: center, left, right.

5. ctx. textBaseline = ""; set the vertical alignment of text, such as top, middle, bottom, and ideographic.

　　3. Image operations

　　1. Use the drawImage () function to draw images. This function has three prototypes:

drawImage(image,dx,dy);drawImage(image,dx,dy,dw,dh);drawImage(image,sx,sy,sw,sh,dx,dydw,dh);

The first parameter is the object to be drawn.

Method 1:

Add the following code in HTML:

The JavaScript code is as follows:

var img=document.getElementById("face");image.onload =function(){        ctx.drawImage(image,10,10);    }  

Method 2:

var image = new Image();    image.src = "1.jpg";    image.onload =function(){        ctx.drawImage(image,10,10);        ctx.drawImage(image,260,10,100,100);        ctx.drawImage(image,50,50,100,100,260,130,100,100);    } 

You must add an onload event listener for the image!

The first function starts to draw the entire image from (10, 10.

The second function draws the entire image from (100, 10) to the rectangular area with a length of 100 and a width.

The third function refers to the part of the screenshot from (50, 50) to (100,100), which is drawn from the coordinate (260,130) and placed in the rectangular area with a length of 100 and a width of 100.

2. Use getImageData and putImageData to draw images.

3. Create a pixel using createImageData.