मुझे एचटीएमएल 5 कैनवास के साथ सर्कल में रेखाएं खींचने में कुछ परेशानी हो रही है। मैं बार को कुछ इस तरह दिखाने की कोशिश कर रहा हूं यहां छवि विवरण दर्ज करें

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var bars = 50;
var radius = 100;
for(var i = 0; i < bars; i++){
  var x = radius*Math.cos(i);
  var y = radius*Math.sin(i);
  draw_rectangle(x+200,y+200,1,13,i, ctx );
}


function draw_rectangle(x,y,w,h,deg, ctx){
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(degrees_to_radians(deg));
  ctx.fillStyle = "yellow";
  ctx.fillRect(-1*(w/2), -1*(h/2), w, h);
  ctx.restore();
}
function degrees_to_radians(degrees){
  return degrees * Math.PI / 180;
}
function radians_to_degrees(radians){
  return radians * 180 / Math.PI;
};

किसी कारण से मेरी पंक्तियाँ टेढ़ी और असंरेखित हैं। मुझे वास्तव में इस पर मदद चाहिए। https://codepen.io/anon/pen/PRBdYV

2
Plixxer 4 अप्रैल 2018, 08:12

3 जवाब

सबसे बढ़िया उत्तर

https://codepen.io/anon/pen/YajONR

  1. समस्याएँ ठीक की गईं: Math.cos को रेडियन चाहिए, डिग्री नहीं
  2. हमें ० से ३६० तक जाने की आवश्यकता है, इसलिए मैंने इसे थोड़ा आसान बनाने के लिए बार की संख्या को समायोजित किया, और i को ६ से गुणा किया (इसलिए अधिकतम मान ६०*६==३६० है)
  3. यदि हम दंडों को खींचते समय +90 नहीं जोड़ते हैं, तो हमें केवल एक वृत्त प्राप्त होता है
0
sneep 4 अप्रैल 2018, 07:07

अपना कोडपेन जांचें और पता लगाएं कि समस्या degrees_to_radians में है

यहां आपके कोड का अपडेट लिंक दिया गया है।लिंक

पीएस मैंने केवल सर्कल के आकार को देखा बार के संरेखण नहीं: डी

0
Script47 7 मई 2018, 02:58

इस तरह के विज़ुअलाइज़ेशन से निपटने का सबसे आसान तरीका है अपने संदर्भ के परिवर्तन मैट्रिक्स के साथ खेलना।

आपको इसे ऐसे समझने की जरूरत है जैसे आप अपने हाथों में कागज की एक शीट पकड़े हुए थे। सही कोण पर रेखाएँ खींचने की कोशिश करने के बजाय, कागज़ की शीट को घुमाएँ, और अपनी रेखाएँ हमेशा एक ही दिशा में खींचे।

इस तरह आपको अपनी ड्राइंग विधि में केवल कोण और प्रत्येक बार की ऊंचाई की आवश्यकता होती है।

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
// the position of the whole thing
var circleX = canvas.width / 2;
var circleY = canvas.height / 2;
//
var bars = 50;
var barWidth = 5;
// inner radius
var radius = 50;
ctx.fillStyle = "yellow";
// no need to use degrees, a full circle is just 2π
for(var i = 0; i < Math.PI*2; i+= (Math.PI*2 / bars)){
  draw_rectangle(i, (Math.random()*30) + 10);
}

function draw_rectangle(rad, barHeight){
  // reset and move to the center of our circle
  ctx.setTransform(1,0,0,1, circleX, circleY);
  // rotate the context so we face the correct angle
  ctx.rotate(rad);
  // move along y axis to reach the inner radius
  ctx.translate(0, radius);
  // draw the bar
  ctx.fillRect(
    -barWidth/2, // centered on x
    0, // from the inner radius
    barWidth,
    barHeight // until its own height
  );
}
canvas#canvas{
  background:black;
}
<html>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
  </body>
</html>
3
Kaiido 4 अप्रैल 2018, 05:38