HTML5 CANVAS：繪制圖片

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

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

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

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

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

　　基本繪制圖片方法：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';

　　上面的代碼的返回結果如下：

　　繪制并縮放圖片：drawImage(image, dx, dy, dw, dh)
　　第二種在
　　下面的例子中，我們將繪制的圖片縮小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);
};

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com