js canvas实现圆角图片

本文实例为大家分享了js canvas实现圆角图片的具体代码，供大家参考，具体内容如下

圆角图片的代码实现：

    
    


 

 
    
    canvas to draw
 
    
 
    



 
 

效果图：

补充一段使用小代码：canvas 生成圆角图片（头像等）

circleImg(ctx, img, x, y, r) {
    ctx.save();
    var d =2 * r;
    var cx = x + r;
    var cy = y + r;
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(img, x, y, d, d);
    ctx.restore();
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。