這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)HTML5 中drawImage()方法如何使用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供周至網(wǎng)站建設(shè)、周至做網(wǎng)站、周至網(wǎng)站設(shè)計(jì)、周至網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、周至企業(yè)網(wǎng)站模板建站服務(wù)，十年周至做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

drawImage()是一個(gè)很關(guān)鍵的方法，它可以引入圖像、畫布、視頻，并對(duì)其進(jìn)行縮放或裁剪。

一共有三種表現(xiàn)形式：

語法 1

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. context.drawImage(img,dx,dy);  

語法 2

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. context.drawImage(img,dx,dy,dw,dw);  

語法 3

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);   

來看一下坐標(biāo)草圖：

PS: 不要在樣式中定義 的寬和高，否則，里面所畫的圖片會(huì)自動(dòng)放大或者縮小。
三參數(shù)的是標(biāo)準(zhǔn)形式，可用于加載圖像、畫布或視頻；五參數(shù)的除了可以加載圖像還可以對(duì)圖像進(jìn)行指定寬高的縮放；九參數(shù)的除了縮放，還可以裁剪。各參數(shù)意義見下表。

下面，我們加載一個(gè)圖片試試。

JavaScript Code復(fù)制內(nèi)容到剪貼板

1.   

2.   

3.   

4.        

5.        

6.        

7.   

8.   

9.   

10.        

11.         你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！   

12.