एचटीएमएल कैनवास - सर्कल के चारों ओर बिंदीदार स्ट्रोक

Question

मुझे पता है कि कैनवास पर प्रस्तुत बिंदीदार स्ट्रोक लाइनों के लिए कोई मूल समर्थन नहीं है, लेकिन मैंने चालाक तरीकों को देखा है कि लोग इसके लिए समर्थन उत्पन्न कर पाए हैं।

मुझे क्या आश्चर्य है कि अगर इसका आकार बदलने के लिए कोई तरीका है तो आकृतियों (विशेष रूप से मंडलियों) के चारों ओर बिंदीदार स्ट्रोक को प्रस्तुत करने की अनुमति देने के लिए?

Answer 1

Live Demo

calcPointsCirc 4 तर्क, केंद्र x/y, त्रिज्या, और डैश की लंबाई लेता है। यह अंक, एक्स, वाई, एक्स, आईई की एक सरणी देता है। आप धराशायी सर्कल को आकर्षित करने के लिए बस बिंदुओं के माध्यम से लूप कर सकते हैं। ऐसा करने के लिए शायद अधिक शानदार तरीके हैं लेकिन लगाए गए आईडी ने इसे एक शॉट दिया है।

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