HTML5 drawing a picture

Author: Benedict Ching June

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

First, draw the image

• Use the DrawImage () method to draw the image.

  The paint environment provides three different version numbers for this method.

• DrawImage (Image,x,y): Draws a picture in the canvas (x, y).
• DrawImage (Image,x,y,width,height): Draws a 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): Splits a rectangular area from the picture (Sourcex,sourcey, Sourcewidth,sourceheight). Zooms to the specified width and height. and draw it in the canvas (x, y).

Second, label

Before you draw a picture, you also need to load the picture into your browser. Here we only 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 into ordering guide [M]. Beijing: Electronic industry Press, 2013.9-10.
 
Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced.
 
HTML5 drawing a picture