javascript - 如何使用 Canvas 将圆与线连接起来

Question

我正在使用 Canvas 标签在世界地图图像上创建圆圈。我想使用 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

Answer 1

这是我前段时间为一个问题写的另一个实现。该代码从 1 个圆的轮廓到另一个圆的轮廓画线。该代码依赖于向量的原理，并且为了确保线不在圆圈内绘制，单位向量的原理。

首先，我们确定 2 个圆的中心点之间的向量。接下来，我们将“半径”单位从每个圆移到线的中间。这具有计算圆和线之间的交点的效果。最后，我们从一个修改后的端点绘制到下一个端点。

如果您多次运行代码，您会得到重叠的圆圈。您可以清楚地看到绘制了圆形轮廓，但没有填充。如果您无论如何都需要填充圆圈，我的代码就太过分了，因为在圆圈内延伸的那部分线无论如何都会被覆盖。 :)

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

var shapeList = [];

function onDocLoaded()
{
	var i, n=3;
	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();
}

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