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();