通過前面的學習，我們現在已經可以在HTML5 canvas中繪制圖形和文字，并給它們設置一些樣式。我們還可以在<canvas>中繪制圖片。用于在<canvas>作為繪制源的圖片可以是下面的幾種元素類型：
HTMLImageElement：可以是由Image()構造函數創建的圖片，也可以是任何的<img>元素。
HTMLVideoElement：使用一個HTML<video>元素作為圖片源，會從視頻中截取當前幀作為圖片源。
HTMLCanvasElement：也可以使用另一個<canvas>元素作為圖片源。
繪制圖片
我們可以通過2D上下文的三種方法來在<canvas>中繪制圖片。
- drawImage(image, dx, dy);
- drawImage(image, dx, dy, dw, dh);
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dw, dh);
基本繪制圖片方法：drawImage(image, dx, dy)
這個方法是在<canvas>中繪制一張圖片。image參數是要繪制的圖片，dx和dy參數是“destinationX”和“destinationY”的簡寫，這兩個參數決定在canvas中什么位置繪制圖片。
下面是一個例子。這個例子在<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';
上面的代碼的返回結果如下：
繪制并縮放圖片：drawImage(image, dx, dy, dw, dh)
第二種在<canvas>中繪制圖片的方法添加了兩個參數：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';
上面的代碼的返回結果如下：
圖片切片方法：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dw, dh)
第三種在<canvas>中繪制圖片的方法有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);
上面的代碼得到的結果如下：
創建和調用圖片
在你能夠在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);
- };
本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201507202267.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。