效果：

封装：

/**

* 画虚线园

* cxt_arc 画布

* thex 画的x坐标

* they 画的y坐标

* raduis 圆半径

* space 虚线的间隔 默认值 2 * Math.PI / 100 即一百空白点

*/

drawDashCircle: function (cxt_arc, thex, they, raduis, space) {

space = space || 2 * Math.PI / 100;

cxt_arc.setLineWidth(1);

cxt_arc.setStrokeStyle("rgba(134,181,162,0.5)");

cxt_arc.setLineCap('square')

var start = 0;//从原点开始画

while (start <= 2 * Math.PI) {

var end = start + space;

cxt_arc.beginPath();//开始一个新的路径

cxt_arc.arc(thex, they, raduis, start, end, false);

start = space + end;

cxt_arc.stroke();//对当前路径进行描边

}

},

 

使用：

this.drawDashCircle(ctx, 200, 200, 60);