頭像剪下功能，canvas區域的圖片展示。

我們有如下一個的canvas標籤。

<div width="98px" height="98px">
    //預設canvas為300*150大小
    <canvas id="canvas"></canvas>
</div>

var img = new Image("./xx.png");
var ctx = document.getElementById('canvas').getContext("2d");
ctx.clearRect(0, 0, 98, 98);
ctx.drawImage(img, x, y, dwidth, dheight, 0
 
, 0, 98, 98);

以上程式碼中，用到了drawImage方法，該方法接收9個引數。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)；

第一個引數是一個影象或者另一個 canvas 的引用。其它8個引數最好是參照右邊的圖解，前4個是定義影象源的切片位置和大小，後4個則是定義切片的目標顯示位置和大小。見證下圖：

這裡注意的一點是：sx, sy, sWidth, sHeight這四個引數是相對於原圖的定位，即使圖片A（400*400）在頁面中僅展示為200*200，但sx, sy, sWidth, sHeight這四個引數依舊是相對於原圖400*400的定位。

所以當遇到不同尺寸的圖用作頭像時，記得巧妙的運用放縮比例（原圖大小：頁面展示大小）的值哦！