HTML Canvas - Dotted line around a circle

Question

I know that there is no built-in support for creating dashed dashed lines on the canvas, but I saw smart ways in which people could create support for this.

I am wondering if there is a way to translate this to allow dashed strokes around shapes (in particular circles)?

Answer 1

Live demo

calcPointsCirc takes 4 arguments, center x / y, dash radius and length. It returns an array of points, x, y, ex, ey. You can simply scroll the points to draw a dotted circle. There probably are much more elegant ways to do this, but the curly identifier gives it a chance.

 function calcPointsCirc( cx,cy, rad, dashLength) { var n = rad/dashLength, alpha = Math.PI * 2 / n, pointObj = {}, points = [], i = -1; while( i < n ) { var theta = alpha * i, theta2 = alpha * (i+1); points.push({x : (Math.cos(theta) * rad) + cx, y : (Math.sin(theta) * rad) + cy, ex : (Math.cos(theta2) * rad) + cx, ey : (Math.sin(theta2) * rad) + cy}); i+=2; } return points; } var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); canvas.width = canvas.height= 200; var pointArray= calcPointsCirc(50,50,50, 1); ctx.strokeStyle = "rgb(255,0,0)"; ctx.beginPath(); for(p = 0; p < pointArray.length; p++){ ctx.moveTo(pointArray[p].x, pointArray[p].y); ctx.lineTo(pointArray[p].ex, pointArray[p].ey); ctx.stroke(); } ctx.closePath(); 

Answer 2

If all else fails, you can always move the variable from 0 to 2 * pi by skipping each step element and drawing all the points of the step points in sin(angle)*radius+centerx, cos(angle)*radius+centery .

There you go, home dot circle :)

Answer 3

My JavaScript Path Library implements a dotted and dotted pattern of arbitrary paths (which can consist of any number of straight or curved segments), including ellipses. Download it and see examples.

Answer 4

I was looking for a dotted circle for my game, and after reading all the pages on which I wrote the class in typescript, it works very well. If someone is looking for a dashed circle in typescript, he is here:

 export class DashedCircle { centerX: number; centerY: number; radius: number; color: string; dashSize: number; ctx: CanvasRenderingContext2D; constructor(ctx:CanvasRenderingContext2D, centerX: number, centerY: number, radius: number, color: string, dashSize: number) { this.ctx = ctx; this.centerX = centerX; this.centerY = centerY; this.radius = radius; this.color = color; this.dashSize = dashSize; } CalculateCirclePoints() { var n = this.radius / this.dashSize; var alpha = Math.PI * 2 / n; var pointObj = {}; var points = []; var i = -1; while (i < n) { var theta = alpha * i; var theta2 = alpha * (i + 1); points.push({ x: (Math.cos(theta) * this.radius) + this.centerX, y: (Math.sin(theta) * this.radius) + this.centerY, ex: (Math.cos(theta2) * this.radius) + this.centerX, ey: (Math.sin(theta2) * this.radius) + this.centerY }); i += 2; } return points; } Draw() { var points = this.CalculateCirclePoints(); this.ctx.strokeStyle = this.color; this.ctx.beginPath(); for (var p = 0; p < points.length; p++) { this.ctx.moveTo(points[p].x, points[p].y); this.ctx.lineTo(points[p].ex, points[p].ey); this.ctx.stroke(); } this.ctx.closePath(); } } 

Answer 5

The easiest way: context.setLineDash ()

 ctx.beginPath(); ctx.setLineDash([5, 5]); ctx.beginPath(); ctx.arc(100, 60, 50, 0, Math.PI * 2); ctx.closePath(); ctx.stroke();