這篇文章將為大家詳細(xì)講解有關(guān)html5中Canvas API中drawImage怎么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),龍城網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:龍城等地區(qū)。龍城做網(wǎng)站價(jià)格咨詢:13518219792

drawImage()是一個(gè)很關(guān)鍵的方法，它可以引入圖像、畫布、視頻，并對其進(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: 不要在樣式中定義 的寬和高，否則，里面所畫的圖片會自動放大或者縮小。
三參數(shù)的是標(biāo)準(zhǔn)形式，可用于加載圖像、畫布或視頻；五參數(shù)的除了可以加載圖像還可以對圖像進(jìn)行指定寬高的縮放；九參數(shù)的除了縮放，還可以裁剪。各參數(shù)意義見下表。

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

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

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

運(yùn)行結(jié)果：

創(chuàng)建相框：
這里，我們結(jié)合clip()和drawImage()以及三次貝塞爾曲線bezierCurveTo()，來為上面一個(gè)案例，加上一個(gè)心形的相框~

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

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

運(yùn)行結(jié)果：

是不是美美的？好啦，至此最關(guān)鍵的遮罩和圖像裁剪以及說完了，其實(shí)在java.awt中，drawImage()也是一個(gè)至關(guān)重要的方法。有人說制作Java游戲界面，只要會用drawImage()就可以一招打遍天下~在Canvas里也是一樣的。美工提供的素材基本都是圖片，這個(gè)時(shí)候drawImage()對圖片的處理就很重要了。即使基本功，也是對圖片最重要的處理方法。

關(guān)于“html5中Canvas API中drawImage怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。