效果图:
实现环境在微信小程序中
参考网站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
);