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
Share Improve this question asked Apr 4, 2018 at 5:12 PlixxerPlixxer 4664 silver badges15 bronze badges4 Answers
Reset to default 6The 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
- Problems fixed:
Math.coswants radians, not degrees - We need to go from 0 to 360, so I adjusted the number of bars to make that a bit easier, and multiplied
iby 6 (so the max value is 60*6==360) - If we don't add
+90when 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();
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744292101a4567083.html
评论列表（0条）