4.7　使用圖像

在canvas中可以導入圖像。導入的圖像可以改變大小、裁切或合成。canvas支持多種圖像格式，如PNG、GIF、JPEG等。

4.7.1　導入圖像

視頻講解

在canvas中導入圖像的步驟：

第1步，確定圖像來源。

第2步，使用drawImage()方法將圖像繪制到canvas中。

確定圖像來源有4種方式，用戶任選一種即可。

　頁面內的圖片：如果已知圖片元素的ID，則可以通過document.images集合、document.getElementsByTagName()或document.getElementById()等方法獲取頁面內的該圖片元素。

　其他canvas元素：可以通過document.getElementsByTagName()或document.getElementById()等方法獲取已經設計好的canvas元素。例如，可以用這種方法為一個比較大的canvas生成縮略圖。

　用腳本創建一個新的image對象：使用腳本可以從零開始創建一個新的image對象。不過這種方法存在一個缺點：如果圖像文件來源于網絡且較大，則會花費較長的時間來裝載。所以如果不希望因為圖像文件裝載而導致漫長的等待，需要做好預裝載的工作。

　使用data:url方式引用圖像：這種方法允許用Base64編碼的字符串來定義一個圖片，優點是圖片可以即時使用，不必等待裝載，而且遷移也非常容易。缺點是無法緩存圖像，所以如果圖片較大，則不太適宜用這種方法，因為這會導致嵌入的url數據相當龐大。

使用腳本創建新image對象時，其方法如下所示。

    var img = new Image();   //創建新的Image對象
    img.src = 'image1.png';   //設置圖像路徑

如果要解決圖片預裝載的問題，則可以使用下面的方法，即使用onload事件一邊裝載圖像一邊執行繪制圖像的函數。

不管采用什么方式獲取圖像來源，之后的工作都是使用drawImage()方法將圖像繪制到canvas中。drawImage()方法能夠在畫布上繪制圖像、畫布或視頻。該方法也能夠繪制圖像的某些部分，以及增加或減少圖像的尺寸。其用法如下所示。

    //語法1：在畫布上定位圖像
    context.drawImage(img,x,y);
    //語法2：在畫布上定位圖像，并規定圖像的寬度和高度
    context.drawImage(img,x,y,width,height);
    //語法3：剪切圖像，并在畫布上定位被剪切的部分
    context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

參數說明如下：

　img：規定要使用的圖像、畫布或視頻。

　sx：可選。開始剪切的x坐標位置。

　sy：可選。開始剪切的y坐標位置。

　swidth：可選。被剪切圖像的寬度。

　sheight：可選。被剪切圖像的高度。

　x：在畫布上放置圖像的x坐標位置。

　y：在畫布上放置圖像的y坐標位置。

　width：可選。要使用的圖像的寬度。可以實現伸展或縮小圖像。

　height：可選。要使用的圖像的高度。可以實現伸展或縮小圖像。

【示例】下面示例演示了如何使用上述步驟將圖像引入canvas中，預覽效果如圖4.47所示。至于第二和第三種drawImage()方法，我們將在后續小節中單獨介紹。

圖4.47　向canvas中導入圖像

4.7.2　縮放圖像

視頻講解

drawImage()方法的第二種用法可以用于使圖片按指定的大小顯示，其用法如下。

    context.drawImage(image, x, y, width, height);

其中width和height分別是圖像在canvas中顯示的寬度和高度。

【示例】下面示例將4.7.1節示例中的代碼稍作修改，設置導入的圖像放大顯示，并僅顯示頭部位置，效果如圖4.48所示。

圖4.48　放大圖像顯示

4.7.3　裁切圖像

視頻講解

drawImage的第三種用法用于創建圖像切片，其用法如下。

    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

其中image參數與前兩種用法相同，其余8個參數可以參考下面的圖示。sx、sy為源圖像被切割區域的起始坐標，sw、sh為源圖像被切下來的寬度和高度，dx、dy為被切割下來的源圖像要放置到目標canvas的起始坐標，dw、dh為被切割下來的源圖像放置到目標canvas的顯示寬度和高度，如圖4.49所示。

圖4.49　其余8個參數的圖示

【示例】下面示例演示如何創建圖像切片，預覽效果如圖4.50所示。

圖4.50　創建圖像切片

4.7.4　平鋪圖像

視頻講解

圖像平鋪就是讓圖像填滿畫布，有兩種方法可以實現，下面結合示例進行說明。

【示例1】第一種方法是使用drawImage()方法。

本例用到幾個變量以及循環語句，相對來說處理方法復雜一些，預覽效果如圖4.51所示。

【示例2】使用createPattern()方法，該方法只使用了幾個參數就達到了上面所述的平鋪效果。createPattern()方法的用法如下所示：

    context.createPattern(image,type);

參數image為要平鋪的圖像，參數type必須是下面的字符串值之一：

　no-repeat：不平鋪。

　repeat-x：橫方向平鋪。

　repeat-y：縱方向平鋪。

　repeat：全方向平鋪。

創建image對象，指定圖像文件后，使用createPattern()方法創建填充樣式，然后將該樣式指定給圖形上下文對象的fillStyle屬性，最后填充畫布，重復填充的效果如圖4.52所示。

圖4.51　通過drawImage()方法平鋪顯示

圖4.52　通過createPattern()方法平鋪顯示