关于canvas切图的小心得

头像剪切功能，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的定位。

所以当遇到不同尺寸的图用作头像时，记得巧妙的运用放缩比例（原图大小：页面展示大小）的值哦！