Draw a dotted circle on the small program canvas

effect:

Package:

/**

* Draw a dotted circle

* cxt_arc canvas

* thex the x coordinate of the drawing

* they draw the y coordinate

* raduis circle radius

* space The default value of the dotted line interval is 2 * Math.PI / 100 means one hundred blank points

*/

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;//Start drawing from the origin

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

var end = start + space;

cxt_arc.beginPath();//Start a new path

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

start = space + end;

cxt_arc.stroke();//Stroke the current path

}

},

 

use:

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