3.5 操作圖像

利用canvas元素不僅可以繪制各種各樣的圖形，而且可以引入外部圖像，并對圖像進行各種操作，例如改變圖像大小、圖像切片、圖像合成等。canvas支持多種常見的圖像格式。向canvas元素引入圖像，分為以下3步。

1．創建image對象

     var image = new Image();

2．設定image對象的onload屬性

     image.onload = function(){
     }

3．在function()中繪制圖像

可以使用以下方法：

● context.drawImage(image, x, y)——在畫布的指定位置繪制圖像；

● context.drawImage(image, x, y, width, height)——按參數指定的位置和大小繪制圖像；

● context.drawImage(image, x, y, sWidth, sHeight, dx, dy, dWidth, dHeight)——裁剪圖像，并在畫布上繪制圖像。

例如，image.html，在畫布上繪制圖像，并繪制輪廓文字。

image.html：

image.html在瀏覽器中的顯示效果如圖3-14所示。