HTML5使用drawImage()方法绘制图像_html5教程技巧

一、绘制图像

使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。
drawImage(image,x,y) ： 在canvas中(x,y)处绘制图片。
drawImage(image,x,y,width,height) ： 在canvas中(x,y)处绘制图片，并将其缩放到指定的宽度和高度。
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) ： 从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight)，缩放到指定的宽度和高度，并在canvas中(x,y)绘制出来。

二、标签

绘制图片前，还需要将图片加载到浏览器中。这里我们仅仅在canvas标签后面添加一个标签。



三、绘制图片

复制代码

代码如下:

四、绘制效果

五、附上原坦克素材