Html5 Canvas初探學習筆記(12) -圖片裁減與調整-H5教程-PHP中文網

Html5 Canvas初探學習筆記(12) -圖片裁減與調整

黄舟

發布： 2017-02-28 16:05:06

原創

1449 人瀏覽過

上一篇講了圖片的兩種操作，讀入和導出，而讀入圖片之後的畫圖片我們採用的是只有三個參數的drawImage，本篇將分別介紹5個參數，和9#drawImage#drawImage#最後一個函數很像j2me裡面的drawRegion。首先介紹
5

個參數的可以調整圖片大小的

drawImage
函數。

首先來看如下效果：

#程式碼如下：

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.drawImage(image,100,50,image.width * 1.5,image.height * 1.5);
context.drawImage(image,200,50,image.width * 0.5,image.height * 0.5);
context.drawImage(image,250,50,160,50);
}

登入後複製

在圖片的onload函數中，我寫了四個drawImage，後三個用的是 5個參數的，效果很明顯，一個把圖片擴大

1.5

倍，一個把圖片縮小為0.5

，還有一個是非等比例的縮放。也就是說後兩個參數是我們設定的我們要繪製的圖片的寬高，當然，在正常情況下，只是等比例的縮放，你也可以指定其他寬度，例如最後一句的效果。

下面來介紹可以裁減的drawImage函數，首先來看參數介紹：drawImage（圖片，圖片中裁減的起始x座標，圖片中裁減的起始y座標，裁減區域寬度，裁減區域高度，所畫位置

座標，所畫位置

座標，所畫圖形寬度，所畫圖形高度）

首先來看如下效果：

#程式碼如下：

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.drawImage(image,0,0,image.width,image.height / 3,100,50,image.width * 1.5,image.height * 0.5);
context.drawImage(image,0,image.height / 3,image.width,image.height * 2/ 3,180,50,image.width * 1.5,image.height);

登入後複製

這個函數比剛才的多了一個裁減功能，可以讓我們任意的裁減圖片，經常被這樣應用，效果如下：

代碼如下：

var test = new Image();
test.src = "test.png";
test.onload = function(){
context.drawImage(test,50,180);
context.drawImage(test,67 * 3,0,67,121,50,280,67,121);
}

登入後複製

###從本例顯示，從一列大圖中做簡單小圖的裁減是裁減的用途之一。 ###### 以上就是Html5 Canvas初探學習筆記(12) -圖片裁減和調整的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！ ################