在个人网站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()将图片画到画布上,那么此时的图片就已经是圆角了,其他区域的内容被裁剪掉了,只保留了该圆角矩形内部的画面。代码相当简单。功能的地址是:图片转换圆角