Here's a solution that will achieve what you've asked for.
I've declared 3 'classes' to make things clearer to read. First, I define a generic shape class. Next, I define a basic circle class. Finally, I define a vec2 class. You could easily extend this as I have done, and add other shapes that inherit from the shape class - i.e square triangle, etc.
I create 10 circles at random positions and radii. I then draw a line between each circle and the one following it. I didn't bother with the 'wrap-around' case, so I draw 10 circles and 9 lines (I dont draw from circle 9 to circle 0)
I've used some of the code Tamura left, hence the familiar dimensions and id of the 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');
for (i=0; i<n; i++)
{
shapeList[i] = new circle_t(Math.random()*578, Math.random()*400, Math.random()*30 + 20);
shapeList[i].draw(canvas);
}
for (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 a vec2 class to make vector maths easier (simpler to 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 for a live demo: http://jsfiddle.net/YYjYL/
