最近在個人網站butterpig實現(xiàn)了圖片一鍵轉換圓角功能，該功能的實現(xiàn)主要用到了html5中的canvas繪圖技術。

首先，實現(xiàn)效果如下：

為了實現(xiàn)該功能，首先我們要生成一個透明底色的空內容的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()方法將這塊圓角矩形區(qū)域剪切，那么此后對畫布的修改，就僅限于這個圓角矩形剪切區(qū)域內了，其他部分依然是透明的。所以現(xiàn)在把圖片通過drawImage()將圖片畫到畫布上，那么此時的圖片就已經是圓角了，其他區(qū)域的內容被裁剪掉了，只保留了該圓角矩形內部的畫面。實現(xiàn)起來相當簡單，如果不容易理解可以補習一下canvas繪圖的基礎知識。該功能的地址是:圖片在線轉圓