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 );