HTML5 Drawing Pictures

Ching

Original address: http://blog.csdn.net/qingdujun/article/details/33344289

First, draw the image

• Use the DrawImage () method to draw the image. The drawing environment provides three different versions of the method.
• DrawImage (Image,x,y): Draws a picture in the canvas (x, y).
• DrawImage (Image,x,y,width,height): Draws the picture in the canvas (x, y) and zooms it to the specified width and height.
• DrawImage (image,sourcex,sourcey,sourcewidth,sourceheight,x,y,width,height): Cut a rectangular area from the picture (Sourcex,sourcey, Sourcewidth,sourceheight), zooms to the specified width and height, and is drawn in the canvas (x, y).

Second, label

Before you draw a picture, you also need to load the picture into your browser. Here we just add a tag behind the canvas tag.

Third, draw pictures

<! DOCTYPE html>
Iv. Drawing Effect

Five, attach the original tank material


References: (India) Xiang Card (SHANKAR,A.R.) (author). She Guanglei (translator). HTML5 Game Development Advanced Guide [M]. Beijing: Electronic industry Press, 2013.9-10.