admin管理员组

文章数量:1405393

I am having some trouble drawing lines in circle with html5 canvas. I am trying to make the bars look something like this 

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;
};

for some reason my lines are all crooked and unaligned. I really need help on this one.

I am having some trouble drawing lines in circle with html5 canvas. I am trying to make the bars look something like this 

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;
};

for some reason my lines are all crooked and unaligned. I really need help on this one. https://codepen.io/anon/pen/PRBdYV

  • javascript
  • html
  • canvas
Share Improve this question asked Apr 4, 2018 at 5:12 PlixxerPlixxer 4664 silver badges15 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 6

The easiest way to deal with such a visualization is to play with the transformation matrix of your context.

You need to understand it as if you were holding a sheet of paper in your hands. Instead of trying to draw the lines at the correct angle, rotate the sheet of paper, and always draw your lines in the same direction.

This way all you need in your drawing method is the angle, and the height of each bar.

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>

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

  1. Problems fixed: Math.cos wants radians, not degrees
  2. We need to go from 0 to 360, so I adjusted the number of bars to make that a bit easier, and multiplied i by 6 (so the max value is 60*6==360)
  3. If we don't add +90 when drawing the bars, we just get a circle

Check your codepen and figured out the problem lies in the degrees_to_radians

Here is the update link of you code.Link

PS I only looked at the shape of the circle not alignments of the bar :D

You can also use lines to achieve the same effect;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var bars = 50;

var r = 100;

let slice = (Math.PI * 2) / bars
let angle = 1; 
for(var i = 0; i < bars; i++){
  var x = Math.cos(angle)*30;
  var y = Math.sin(angle)*30;
  draw_rectangle(x,y,1,13,ictx );
  angle += slice
}


function draw_rectangle(x,y,ctx){
  
  var size = Math.random()*5+1
 
  ctx.beginPath()
  ctx.strokeStyle='red'
  ctx.moveTo(x+r, y+r);
  ctx.lineTo(x*size+r, y*size+r);
  ctx.stroke();
  //ctx.restore();
}

本文标签： javascripthtml5 canvas draw lines in a circleStack Overflow

版权声明：本文标题：javascript - html5 canvas draw lines in a circle - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744292101a2599165.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。