本文將為大家詳細(xì)介紹“HTML5 CANVAS中如何繪制圖片”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“HTML5 CANVAS中如何繪制圖片”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)磐安免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。  3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器。

HTML5 CANVAS：繪制圖片

通過(guò)前面的學(xué)習(xí)，我們現(xiàn)在已經(jīng)可以在HTML5 canvas中繪制圖形和文字，并給它們?cè)O(shè)置一些樣式。我們還可以在<canvas>中繪制圖片。用于在<canvas>作為繪制源的圖片可以是下面的幾種元素類型：

HTMLImageElement：可以是由Image()構(gòu)造函數(shù)創(chuàng)建的圖片，也可以是任何的<img>元素。

HTMLVideoElement：使用一個(gè)HTML<video>元素作為圖片源，會(huì)從視頻中截取當(dāng)前幀作為圖片源。

HTMLCanvasElement：也可以使用另一個(gè)<canvas>元素作為圖片源。

繪制圖片
我們可以通過(guò)2D上下文的三種方法來(lái)在

• drawImage(image, dx, dy);

• drawImage(image, dx, dy, dw, dh);

• drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dw, dh);

  
  

基本繪制圖片方法：drawImage(image, dx, dy)
這個(gè)方法是在

下面是一個(gè)例子。這個(gè)例子在

var ctx = document.getElementById('ex1').getContext('2d');
var img = new Image();
img.onload = function(){
    ctx.drawImage(img,0,0);
};
img.src = 'img/canvas-image-1.jpg';

1. 上面的代碼的返回結(jié)果如下：

繪制并縮放圖片：drawImage(image, dx, dy, dw, dh)
第二種在
下面的例子中，我們將繪制的圖片縮小1/3左右，然后將它重復(fù)排列形成一個(gè)網(wǎng)格。

var ctx = document.getElementById('ex2').getContext('2d');
var img = new Image();
img.onload = function(){
    for (var i=0;i<4;i++){
      for (var j=0;j<5;j++){
        ctx.drawImage(img,j*60,i*60,60,60);
      }
    }
};
img.src = 'img/canvas-image-2.jpg';

上面的代碼的返回結(jié)果如下：

圖片切片方法：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dw, dh)
第三種在<canvas>中繪制圖片的方法有8個(gè)參數(shù)。image是源圖片，sx和sy是“sourceX”和“sourceY”的簡(jiǎn)寫(xiě)，這兩個(gè)參數(shù)決定從什么位置開(kāi)始在源圖片上裁剪出一個(gè)矩形區(qū)域，這個(gè)區(qū)域的圖片將會(huì)被繪制在Canvas中。sWidth和sHeight表示矩形區(qū)域的寬度和高度。剩下的4個(gè)參數(shù)和上面的繪制圖片方法中的描述相同。看下面的圖片，圖片上標(biāo)出了各個(gè)參數(shù)的位置。

來(lái)看下面的一個(gè)例子。這個(gè)例子中，我們將源圖片剪裁出一部分，然后將它繪制在canvas的一個(gè)邊框圖片之上。

var canvas = document.getElementById('ex3');
var ctx = canvas.getContext('2d');
// 繪制圖片切片
ctx.drawImage(document.getElementById('source'),
            98, 205, 104, 124, 21, 20, 87, 104);
// 繪制邊框圖片
ctx.drawImage(document.getElementById('frame'),0,0);

1. 上面的代碼得到的結(jié)果如下：

創(chuàng)建和調(diào)用圖片
在你能夠在Canvas中繪制圖片之前，你需要?jiǎng)?chuàng)建一個(gè)Image對(duì)象，然后將圖片加載到內(nèi)存中。下面是完成這個(gè)操作的js代碼：

var image = new Image();
image.src = "img/sample.png";

在你能夠繪制圖片之前，圖片必須被完全加載。為了確保圖片被完全加載，你可以為圖片添加一個(gè)事件監(jiān)聽(tīng)，這個(gè)事件監(jiān)聽(tīng)中的方法會(huì)在圖片被完全加載之后被調(diào)用。下面是一個(gè)示例代碼：

image.addEventListener('load', drawImage1);

1. 或者：

var img = new Image();
img.onload = function(){
    ctx.drawImage(img,0,0);
};

如果你能讀到這里，小編希望你對(duì)“HTML5 CANVAS中如何繪制圖片”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：HTML5CANVAS中如何繪制圖片-創(chuàng)新互聯(lián)
本文路徑：http://chinadenli.net/article14/dihdde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)頁(yè)設(shè)計(jì)公司、商城網(wǎng)站、網(wǎng)站排名、品牌網(wǎng)站制作、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)