如何使用畫布連接具有線條的圓圈

我正在使用畫布標籤在世界地圖圖像上創建圓圈。我想用Canvas標籤連線多個圈子。截至現在，我可以繪製圓圈，但無法繪製線條。如何使用畫布連接具有線條的圓圈

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

來源

2017-01-24 Sjay

你知道，我們可以繪製所有4圈在一個帆布？然後，您可以簡單地使用圓心座標作爲線的源和原點。 –

謝謝@ThomasAltmann – Sjay

檢查該工作代碼：

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>

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

這也可as a Fiddle。

來源

2017-01-24 13:00:24

感謝@hirenJungi – Sjay

快樂編碼:) –

好的感謝信息現在完成。 –

這是我前段時間爲某個問題寫的另一個實現。該代碼繪製從1個圓的輪廓線到另一個圓的輪廓線。代碼依賴於向量的原理，並確保線不在圓內繪製，即單位向量。

首先，我們確定兩個圓的中心點之間的向量。接下來，我們將「半徑」單位從每個圓圈向該行的中間移動。這具有計算圓和線之間的交點的效果。最後，我們從一個修改的端點引用到下一個端點。

如果您運行代碼幾次，會出現重疊的圓圈。您可以清楚地看到圓形輪廓被繪製，但未被填充。如果你仍然需要填充圓圈，我的代碼是矯枉過正的，因爲無論如何都會覆蓋在圓圈內延伸的部分。 :)

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>

來源

2017-01-25 00:22:36 enhzflep

非常感謝你@enhzflep – Sjay

如何使用畫布連接具有線條的圓圈

回答

相關問題