HTML5CANVAS中如何繪制圖片-創(chuàng)新互聯(lián)

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

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

html有什么特點(diǎn)

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

HTML5 CANVAS：繪制圖片

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

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

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

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

繪制圖片
我們可以通過2D上下文的三種方法來在

• drawImage(image, dx, dy);

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

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

  
  

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

下面是一個例子。這個例子在

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ù)排列形成一個網(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個參數(shù)。image是源圖片，sx和sy是“sourceX”和“sourceY”的簡寫，這兩個參數(shù)決定從什么位置開始在源圖片上裁剪出一個矩形區(qū)域，這個區(qū)域的圖片將會被繪制在Canvas中。sWidth和sHeight表示矩形區(qū)域的寬度和高度。剩下的4個參數(shù)和上面的繪制圖片方法中的描述相同?？聪旅娴膱D片，圖片上標(biāo)出了各個參數(shù)的位置。

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

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中繪制圖片之前，你需要創(chuàng)建一個Image對象，然后將圖片加載到內(nèi)存中。下面是完成這個操作的js代碼：

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

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

image.addEventListener('load', drawImage1);

1. 或者：

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

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

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

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

廣告

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