HTML帆布 - 周围一圈

Question

我不知道有这样做呈现在画布上点行程线路没有原生支持，但我已经看到了聪明的方式让人们已经能够产生这种支持虚线中风。

什么我不知道是如果有任何方式把这种允许渲染周围形状（特别是圆形）点招？

Answer 1

Live Demo

calcPointsCirc需要4个参数，该中心的x/y，半径和破折号的长度。它返回一个点数组，x，y，ex，ey。你可以循环点绘制虚线圆。有可能有更多更优雅的方式来做到这一点，但想法Id给它一个镜头。

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

如果一切都失败了，你可以随时循环从0到2 * pi一个变量，跳绳每step项目，并在sin(angle)*radius+centerx, cos(angle)*radius+centery每隔step项目点来绘制。

你去那里，自制的虚线圆圈:)

Answer 3

我

器具JavaScript Path library虚线和的任意路径（其可以由任何数量的直的或弯曲段中的），包括椭圆形虚线绘图。下载并查看示例。

Answer 4

我一直在寻找一个虚线圆了我的比赛，阅读完所有的页面后，我写了一个类打字稿它工作得很好。如果有人在打字稿中寻找虚线圈，它就在这里;

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

使用context.setLineDash()

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