通過前面的學習，我們現在已經可以在HTML5 canvas中繪制圖形和文字，并給它們設置一些樣式。我們還可以在中繪制圖片。用于在作為繪制源的圖片可以是下面的幾種元素類型：

HTMLImageElement：可以是由Image()構造函數創建的圖片，也可以是任何的元素。

HTMLVideoElement：使用一個HTML元素作為圖片源，會從視頻中截取當前幀作為圖片源。

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

繪制圖片

我們可以通過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)

這個方法是在中繪制一張圖片。image參數是要繪制的圖片，dx和dy參數是“destinationX”和“destinationY”的簡寫，這兩個參數決定在canvas中什么位置繪制圖片。

下面是一個例子。這個例子在中(0,0)位置開始繪制指定的圖片。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';

上面的代碼的返回結果如下：你的瀏覽器不支持HTML5 Canvas！

繪制并縮放圖片：drawImage(image, dx, dy, dw, dh)

第二種在中繪制圖片的方法添加了兩個參數：dw和dh，這兩個參數分別是“destinationWidth”和“destinationHeight”的簡寫，它們決定在繪制圖片時是否對圖片進行縮放。

下面的例子中，我們將繪制的圖片縮小1/3左右，然后將它重復排列形成一個網格。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';

上面的代碼的返回結果如下：你的瀏覽器不支持HTML5 Canvas！

圖片切片方法：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dw, dh)

第三種在中繪制圖片的方法有8個參數。image是源圖片，sx和sy是“sourceX”和“sourceY”的簡寫，這兩個參數決定從什么位置開始在源圖片上裁剪出一個矩形區域，這個區域的圖片將會被繪制在Canvas中。sWidth和sHeight表示矩形區域的寬度和高度。剩下的4個參數和上面的繪制圖片方法中的描述相同。看下面的圖片，圖片上標出了各個參數的位置。

來看下面的一個例子。這個例子中，我們將源圖片剪裁出一部分，然后將它繪制在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);

上面的代碼得到的結果如下：你的瀏覽器不支持HTML5 Canvas！

創建和調用圖片

在你能夠在Canvas中繪制圖片之前，你需要創建一個Image對象，然后將圖片加載到內存中。下面是完成這個操作的js代碼：var?image?=?new?Image();

image.src?=?"img/sample.png";

在你能夠繪制圖片之前，圖片必須被完全加載。為了確保圖片被完全加載，你可以為圖片添加一個事件監聽，這個事件監聽中的方法會在圖片被完全加載之后被調用。下面是一個示例代碼：image.addEventListener('load',?drawImage1);

或者：var?img?=?new?Image();

img.onload?=?function(){

ctx.drawImage(img,0,0);

};

相關閱讀

總結

以上是生活随笔為你收集整理的前端html生成图片,HTML5 Canvas：绘制图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。