HTML5canvas (2 )-

There are three main ways to draw images, from which you can clearly understand the role of each parameter drawImage (image, dx, dy) drawImage (image, sx, sy, sw, sh, dx, dy, dw, dh) drawImage (image, dx, dy, dw, dh) where the image parameter can be HTMLImageElement (im ...,. There are three main ways to draw images, from which you can clearly understand the role of each parameter

• DrawImage (image, dx, dy)
  
• DrawImage (image, sx, sy, sw, sh, dx, dy, dw, dh)
  
• DrawImage (image, dx, dy, dw, dh)
  The image parameter can be any object in HTMLImageElement (img Tag Element), HTMLCanvasElement (canvas Tag Element), and HTMLVideoElement (video element.
  

The following uses a map of the tank war to demonstrate how to use it. The resource image is shown on the right.

First, let's talk about the basic structure.

• Your browser does not support canvas!
• Script
• Var myCanvas = document. getElementById ("myCanvas ");
• Var context = myCanvas. getContext ("2d ");
• Script
• 
  

Then create an image

• Var mapImg = new Image (); // create an Image
• MapImg. src = "http://www.w3cfuns.com/data/attachment/forum/201107/26/194717f9ijaam199j9jvkv.png" // The image address of the tank map. Its width is 64 and its height is 16.
  

Then you can draw a picture.

• Context. drawImage (mapImg); // draw a picture at coordinates 0, 0. The width and height indicate the width and height of the image.
• Context. drawImage (mapImg, 100,100); // draw a picture at coordinate 100,100. The width and height indicate the width and height of the image.
• Context. drawImage (mapImg, 100,200,640,233); // draw at coordinates 100,200, width 640, height 233
• Context. drawImage (mapImg, 16, 0, 16, 16,200,100, 64, 64); // draw at coordinates 200,100, width 64, height 64, the image content is
• 16 to the left of the source image. The value 0 above is 16 to 16.
  

Experiment with [html]

Your browser does not support canvas!
Script
Var myCanvas = document. getElementById ("myCanvas ");
Var context = myCanvas. getContext ("2d ");
Var mapImg = new Image ();
MapImg. src = "http://www.w3cfuns.com/data/attachment/forum/201107/26/194717f9ijaam199j9jvkv.png"

MapImg. onload = function ()
{
Context. drawImage (mapImg, 100,100 );
Context. drawImage (mapImg, 200,100,100, 60 );
Context. drawImage (mapImg, 16,0, 16,16, 100,200, 64,64 );
}
Script

[/Html]
Then, you can try to construct a tank map. First, define a function to draw small blocks on the map.

• Function drawTile (x, y, type) // The parameters are coordinates x, y, and map types.
• Function drawTile (x, y, type)
• {
• Context. drawImage (mapImg, type * 16, 0, 16, 16, x, y, 16, 16); // type * 16 indicates the left boundary distance from the source image.
• }
  

Try again
[Html]

Your browser does not support canvas!
Script
Var myCanvas = document. getElementById ("myCanvas ");
Var context = myCanvas. getContext ("2d ");
Var mapImg = new Image ();
MapImg. src = "http://www.w3cfuns.com/data/attachment/forum/201107/26/194717f9ijaam199j9jvkv.png"

Function drawTile (x, y, type)
{
Context. drawImage (mapImg, type * 16, 0, 16, 16, x, y, 16, 16 );
}

MapImg. onload = function ()
{
DrawTile (0, 0, 0 );
DrawTile (50, 0, 1 );
DrawTile (0, 50, 2 );
DrawTile (50, 50, 3 );
}
Script

[/Html]

Finally, the whole tank map is constructed. The map is defined as follows. Each number represents a map type, and 0 represents nothing.

• Var map =
• [
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• [,],
• ];