canvas画圆形图片

效果图：

实现环境在微信小程序中

参考网站https://www.jianshu.com/p/9a6ee2648d6f

先封装circleImg（）方法

circleImg : function (ctx , img , x , y , r ){

ctx .save ();

var d = 2 * r ;

var cx = x + r ;

var cy = y + r ;

ctx .beginPath ();

ctx .arc (cx , cy , r , 0 , 2 * Math .PI );

ctx .clip ();

ctx .drawImage (img , x , y , d , d );

},

var ctx = wx .createCanvasContext ( 'radarcanvas' );

this .circleImg (ctx , "../images/detail2/detail7.jpg" , 300 , 853 , 64 );

ctx .draw ( 0 , 0 , 750 , 1334 );