在个人网站butterpig实现了图片一键转换圆角功能，该功能的实现主要用到了html5中的canvas绘图技术相关知识，都是很基础的内容，不了解canvas的可以自己补习一下。

首先，我们看看效果：

实现起来很简单，我们要生成一个透明底色的空内容的canvas，然后获取到canvas的context对象，通过对象的arc()和lineTo()方法来画出一个圆角的矩形，代码如下： 

1
2
3
4
5
6
7
8
9
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()方法将这块圆角矩形区域剪切，那么此后对画布的修改，就仅限于这个圆角矩形剪切区域内了，其他部分依然是透明的。所以现在把图片通过draw’Image()将图片画到画布上，那么此时的图片就已经是圆角了，其他区域的内容被裁剪掉了，只保留了该圆角矩形内部的画面。代码相当简单。功能的地址是:图片转换圆角