So verbinden Sie Kreise mit Linien mit Leinwand

Question

Ich benutze Canvas-Tag, um Kreise auf der Weltkarte Bild zu erstellen. Ich möchte mehrere Kreise mit Linien verbinden, indem ich das Canvas-Tag verwende. Ab jetzt kann ich Kreise zeichnen, konnte aber keine Linien zeichnen.

HTML

<img src="http://educypedia.karadimov.info/library/worldoutlinemap.gif" width="500"/> 
<canvas id="myCanvas1" width="200" height="200"></canvas> 
<canvas id="myCanvas2" width="200" height="200"></canvas> 
<canvas id="myCanvas3" width="200" height="200"></canvas> 
<canvas id="myCanvas4" width="200" height="200"></canvas> 

CSS

#myCanvas1 
{ 
    position: absolute; 
    top: 20px; 
    left: 245px; 
    z-index: 3; 
} 
#myCanvas2 
{ 
    position: absolute; 
    top: 20px; 
    left: 25px; 
    z-index: 3; 
} 

#myCanvas3 
{ 
    position: absolute; 
    top: 200px; 
    left: 60px; 
    z-index: 3; 
} 

#myCanvas4 
{ 
    position: absolute; 
    top: 150px; 
    left: 200px; 
    z-index: 3; 
} 

Javascript

/* circle1 */ 
    var canvas = document.getElementById('myCanvas1'); 
    var context = canvas.getContext('2d'); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 10; 
    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'grey'; 
    context.fill(); 
    context.stroke(); 
    /* circle1 */ 

    /* circle2 */ 
    var canvas = document.getElementById('myCanvas2'); 
    var context = canvas.getContext('2d'); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 10; 
    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'grey'; 
    context.fill(); 
    context.stroke(); 
    /* circle2 */ 

    /* circle3 */ 
    var canvas = document.getElementById('myCanvas3'); 
    var context = canvas.getContext('2d'); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 10; 
    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'grey'; 
    context.fill(); 
    context.stroke(); 
    /* circle3 */ 

    /* circle4 */ 
    var canvas = document.getElementById('myCanvas4'); 
    var context = canvas.getContext('2d'); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 10; 
    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'grey'; 
    context.fill(); 
    context.stroke(); 
    /* circle4 */ 

Fiddle

Answer 1

prüfen diese Arbeitscode:

012.351.

HTML

<img src="http://educypedia.karadimov.info/library/worldoutlinemap.gif" width="500"/> 
<canvas id="line" width="500" height="200"></canvas> 
<canvas id="myCanvas1" width="200" height="200"></canvas> 
<canvas id="myCanvas2" width="200" height="200"></canvas> 
<canvas id="myCanvas3" width="200" height="200"></canvas> 
<canvas id="myCanvas4" width="200" height="200"></canvas> 

JS

/*line1*/ 
    var canvas = document.getElementById('line'); 
    var ctx = canvas.getContext('2d'); 
    ctx.beginPath(); 
    ctx.moveTo(130, 0); 
    ctx.lineTo(300, 150); 
    ctx.stroke(); 

/* circle1 */ 
    var canvas = document.getElementById('myCanvas1'); 
    var context = canvas.getContext('2d'); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 10; 
    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'grey'; 
    context.fill(); 
    context.stroke(); 
    /* circle1 */ 

    /* circle2 */ 
    var canvas = document.getElementById('myCanvas2'); 
    var context = canvas.getContext('2d'); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 10; 
    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'grey'; 
    context.fill(); 
    context.stroke(); 
    /* circle2 */ 

    /* circle3 */ 
    var canvas = document.getElementById('myCanvas3'); 
    var context = canvas.getContext('2d'); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 10; 
    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'grey'; 
    context.fill(); 
    context.stroke(); 
    /* circle3 */ 

    /* circle4 */ 
    var canvas = document.getElementById('myCanvas4'); 
    var context = canvas.getContext('2d'); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 10; 
    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'grey'; 
    context.fill(); 
    context.stroke(); 
    /* circle4 */ 

CSS

#line 
{ 
    position: absolute; 
    top: 110px; 
    left: 0px; 
    z-index: 3; 
} 

#myCanvas1 
{ 
    position: absolute; 
    top: 20px; 
    left: 245px; 
    z-index: 3; 
} 
#myCanvas2 
{ 
    position: absolute; 
    top: 20px; 
    left: 25px; 
    z-index: 3; 
} 

#myCanvas3 
{ 
    position: absolute; 
    top: 200px; 
    left: 60px; 
    z-index: 3; 
} 

#myCanvas4 
{ 
    position: absolute; 
    top: 150px; 
    left: 200px; 
    z-index: 3; 
} 

Dies auch as a Fiddle zur Verfügung steht.

Answer 2

Hier ist eine andere Implementierung, die ich vor einiger Zeit für eine Frage geschrieben habe. Der Code zeichnet Linien vom Umriss von 1 Kreis zum Umriss eines anderen Kreises. Der Code beruht auf den Prinzipien von Vektoren und, um sicherzustellen, dass die Linie nicht innerhalb des Kreises gezeichnet ist, die von Einheitsvektoren.

Zuerst bestimmen wir den Vektor zwischen den Mittelpunkten von 2 Kreisen. Als nächstes bewegen wir die "Radius" -Einheiten von jedem Kreis in die Mitte der Linie. Dies hat den Effekt, den Schnittpunkt zwischen dem Kreis und der Linie zu berechnen. Schließlich zeichnen wir von einem modifizierten Endpunkt zum nächsten.

Wenn Sie den Code ein paar Mal ausführen, erhalten Sie Kreise, die sich überlappen. Sie können deutlich sehen, dass Kreiskonturen gezeichnet, aber nicht ausgefüllt sind. Wenn Sie die Kreise trotzdem füllen müssen, ist mein Code übertrieben, da der Teil der Linie, der sich innerhalb des Kreises erstreckt, sowieso abgedeckt wird. :)

function byId(e){return document.getElementById(e)} 
 
window.addEventListener('load', onDocLoaded, false); 
 

 
var shapeList = []; 
 

 
function onDocLoaded() 
 
{ 
 
\t var i, n=3; 
 
\t var canvas = byId('myCanvas'); 
 
\t 
 
\t for (i=0; i<n; i++) 
 
\t { 
 
\t \t shapeList[i] = new circle_t(Math.random()*578, Math.random()*400, Math.random()*30 + 20); 
 
\t \t shapeList[i].draw(canvas); 
 
\t } 
 
\t 
 
\t for (i=0; i<n-1; i++) 
 
\t \t draw_line2(shapeList[i].origX, shapeList[i].origY, shapeList[i].radius, shapeList[i+1].origX, shapeList[i+1].origY, shapeList[i+1].radius); 
 
} \t 
 

 
var shape_t = function(x,y) 
 
{ 
 
\t this.origX = (x==undefined ? 0 : x); 
 
\t this.origY = (y==undefined ? 0 : y); 
 
} 
 
shape_t.prototype = 
 
{ 
 
\t origX:0, origY:0, typeString:'shape', 
 
\t setPos: function(x,y){this.x=x;this.y=y;}, 
 
\t setType: function(typeString){this.typeString = typeString;}, 
 
\t toString: function(){return this.typeString + " - " + this.origX + "," + this.origY;}, 
 
\t draw: function(canElem){}, 
 
}; 
 

 
function circle_t(x,y,radius) 
 
{ 
 
\t this.origX = (x==undefined ? 0 : x); 
 
\t this.origY = (y==undefined ? 0 : y); 
 
\t this.radius = (radius==undefined ? 10 : radius); 
 
\t this.setType("circle"); 
 
} 
 
circle_t.prototype = new shape_t(); 
 
circle_t.prototype.constructor = circle_t; 
 
circle_t.prototype.draw = function(canElem, color) 
 
{ 
 
\t var ctx = canElem.getContext('2d'); 
 
\t var col = 'black'; 
 
\t if (color != undefined) 
 
\t \t col = color; 
 
\t drawCircle(this.origX, this.origY, this.radius, ctx, col); 
 
} 
 

 
circle_t.prototype.setRadius = function(radius) 
 
{ 
 
\t if (radius != undefined) 
 
\t \t this.radius = radius; 
 
} 
 

 
function drawCircle(x, y, radius, ctx, col) 
 
{ 
 
\t ctx.save(); 
 
\t if (col == undefined) 
 
\t \t col = 'black'; 
 
\t ctx.strokeStyle = col; 
 
\t ctx.lineWidth = 1; 
 
\t ctx.beginPath(); 
 
\t ctx.arc(x,y,radius,(Math.PI/180)*0, (Math.PI/180)*360, false); 
 
\t ctx.stroke(); 
 
\t ctx.closePath(); 
 
\t ctx.restore(); 
 
} 
 

 
// define a vec2 class to make vector maths easier (simpler to read) 
 
function vec2(x,y) 
 
{ 
 
\t this.length = function() 
 
\t { 
 
\t \t return Math.sqrt((this.x * this.x) + (this.y*this.y)); 
 
\t } 
 
\t this.normalize = function() 
 
\t { 
 
\t \t var scale = this.length(); 
 
\t \t this.x /= scale; 
 
\t \t this.y /= scale; 
 
\t } 
 
\t this.x = x; 
 
\t this.y = y; 
 
} 
 

 
function draw_line2(center1_x, center1_y, radius1, center2_x, center2_y, radius2) 
 
{ 
 
\t var betweenVec = new vec2(center2_x - center1_x, center2_y - center1_y); 
 
\t betweenVec.normalize(); 
 
\t 
 
\t var p1x = center1_x + (radius1 * betweenVec.x); 
 
\t var p1y = center1_y + (radius1 * betweenVec.y); 
 
\t 
 
\t var p2x = center2_x - (radius2 * betweenVec.x); 
 
\t var p2y = center2_y - (radius2 * betweenVec.y); 
 

 
\t var canvas = document.getElementById('myCanvas'); 
 
\t var context = canvas.getContext('2d'); 
 
\t context.beginPath(); 
 
\t \t context.moveTo(p1x,p1y); 
 
\t \t context.lineTo(p2x,p2y); 
 
\t context.stroke(); 
 
}

<canvas id="myCanvas" width="578" height="400"></canvas>