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標籤後面加上一個標籤。



三、繪製圖片

複製代碼

代碼如下:

提示：你的瀏覽器不支援標籤

身體>


四、繪製效果
 五、附上原始坦克素材