javascript - JS drawing a line from the edge of a circle to another circle edge -
i'm trying draw line edges of 2 circles in html5 canvas. so, know coordinates of centers of 2 circles , radius.
- circles drawn randomly.
- line should move edge of 1 circle other.
please help!
p.s. sorry english :)
update:
i'm trying this, how know angle?
from_line_x = circle1.x + circle1.radius * math.cos(math.pi * angle); from_line_y = circle1.y + cirlce1.radius * math.sin(math.pi * angle); to_line_x = circle2.x - circle2.radius * math.cos(math.pi * angle); to_line_y = circle2.y - circle2.radius * math.sin(math.pi * angle); update2:
i think found how find angle. circle drawn randomly, line drawn not true. how should algorithm?
sorry english again.
here's solution achieve you've asked for.
i've declared 3 'classes' make things clearer read. first, define generic shape class. next, define basic circle class. finally, define vec2 class. extend have done, , add other shapes inherit shape class - i.e square triangle, etc.
i create 10 circles @ random positions , radii. draw line between each circle , 1 following it. didn't bother 'wrap-around' case, draw 10 circles , 9 lines (i dont draw circle 9 circle 0)
i've used of code tamura left, hence familiar dimensions , id of canvas.
<!doctype html> <html> <head> <script> function byid(e){return document.getelementbyid(e)} window.addeventlistener('load', ondocloaded, false); var shapelist = []; function ondocloaded() { var i, n=10; var canvas = byid('mycanvas'); (i=0; i<n; i++) { shapelist[i] = new circle_t(math.random()*578, math.random()*400, math.random()*30 + 20); shapelist[i].draw(canvas); } (i=0; i<n-1; i++) draw_line2(shapelist[i].origx, shapelist[i].origy, shapelist[i].radius, shapelist[i+1].origx, shapelist[i+1].origy, shapelist[i+1].radius); } var shape_t = function(x,y) { this.origx = (x==undefined ? 0 : x); this.origy = (y==undefined ? 0 : y); } shape_t.prototype = { origx:0, origy:0, typestring:'shape', setpos: function(x,y){this.x=x;this.y=y;}, settype: function(typestring){this.typestring = typestring;}, tostring: function(){return this.typestring + " - " + this.origx + "," + this.origy;}, draw: function(canelem){}, }; function circle_t(x,y,radius) { this.origx = (x==undefined ? 0 : x); this.origy = (y==undefined ? 0 : y); this.radius = (radius==undefined ? 10 : radius); this.settype("circle"); } circle_t.prototype = new shape_t(); circle_t.prototype.constructor = circle_t; circle_t.prototype.draw = function(canelem, color) { var ctx = canelem.getcontext('2d'); var col = 'black'; if (color != undefined) col = color; drawcircle(this.origx, this.origy, this.radius, ctx, col); } circle_t.prototype.setradius = function(radius) { if (radius != undefined) this.radius = radius; } function drawcircle(x, y, radius, ctx, col) { ctx.save(); if (col == undefined) col = 'black'; ctx.strokestyle = col; ctx.linewidth = 1; ctx.beginpath(); ctx.arc(x,y,radius,(math.pi/180)*0, (math.pi/180)*360, false); ctx.stroke(); ctx.closepath(); ctx.restore(); } // define vec2 class make vector maths easier (simpler read) function vec2(x,y) { this.length = function() { return math.sqrt((this.x * this.x) + (this.y*this.y)); } this.normalize = function() { var scale = this.length(); this.x /= scale; this.y /= scale; } this.x = x; this.y = y; } function draw_line2(center1_x, center1_y, radius1, center2_x, center2_y, radius2) { var betweenvec = new vec2(center2_x - center1_x, center2_y - center1_y); betweenvec.normalize(); var p1x = center1_x + (radius1 * betweenvec.x); var p1y = center1_y + (radius1 * betweenvec.y); var p2x = center2_x - (radius2 * betweenvec.x); var p2y = center2_y - (radius2 * betweenvec.y); var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); context.beginpath(); context.moveto(p1x,p1y); context.lineto(p2x,p2y); context.stroke(); } </script> </head> <body> <canvas id="mycanvas" width="578" height="400"></canvas> </body> </html> see here live demo: http://jsfiddle.net/yyjyl/
Comments
Post a Comment