使用h5中canvas画圆角矩形，生成透明圆角图片，实现图片在线转圆角功能

最近在个人网站butterpig实现了图片一键转换圆角功能，该功能的实现主要用到了html5中的canvas绘图技术。

首先，实现效果如下：

为了实现该功能，首先我们要生成一个透明底色的空内容的canvas，然后获取到canvas的context对象，通过对象的arc()和lineTo()方法来画出一个圆角的矩形，部分代码如下：

ctx.beginPath();

ctx.arc(width-radius, height-radius, radius, 0, Math.PI/2);

ctx.lineTo(radius, height);

ctx.arc(radius, height-radius, radius, Math.PI/2, Math.PI);

ctx.lineTo(0, radius);

ctx.arc(radius, radius, radius, Math.PI, Math.PI*3/2);

ctx.lineTo(width-radius, 0);

ctx.arc(width-radius,radius,radius,Math.PI*3/2, Math.PI*2);

ctx.closePath();

然后通过clip()方法将这块圆角矩形区域剪切，那么此后对画布的修改，就仅限于这个圆角矩形剪切区域内了，其他部分依然是透明的。所以现在把图片通过drawImage()将图片画到画布上，那么此时的图片就已经是圆角了，其他区域的内容被裁剪掉了，只保留了该圆角矩形内部的画面。实现起来相当简单，如果不容易理解可以补习一下canvas绘图的基础知识。该功能的地址是:图片在线转圆