Question

我正在尝试从HTML5画布中的两个圆的边缘绘制一条线。所以，我知道两个圆心的坐标及其半径。

随机抽取的圆圈。
线条应从一个圆圈的边缘移动到另一个圆圈。

请帮忙！

P.S。对不起我的英文：）

更新：

我正在尝试这个，但如何知道角度？

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：

我想我找到了如何找到角度。但是作为一个随机绘制的圆，绘制的线并不总是正确的。那怎么看算法？

对不起我的英语。

Answer 1

3步骤解决方案：
- 构建所有随机圆坐标（x，y，r） - 在你认为合适的情况下，在它们的中心之间绘制所有线条 - 画出所有圈子。

（！）

代码非常简单：

http://jsbin.com/qutahatu/1/edit?js,output

enter image description here

var circles = [];

function createCircles(cnt) {
  circles = [];
  for (var i=0; i<cnt; i++) {
    var x = 5+ Math.random() *300;
    var y = 5+ Math.random() *300;
    var r = 20  + Math.random() *6;    
    circles.push({x:x,y:y,r:r});
  }
}

function drawLines() {
  var cnt= circles.length;
   ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(circles[0].x, circles[0].y);
  for (var i=1; i<cnt; i++) {
     ctx.lineTo(circles[i].x, circles[i].y);
  }
  ctx.stroke(); 
}

function drawCircles() {
  var cnt= circles.length;
   ctx.fillStyle = '#4A8';
  for (var i=0; i<cnt; i++) {
     ctx.beginPath();
     ctx.arc(circles[i].x, circles[i].y, circles[i].r, 0, 6.282);
     ctx.fill();
  }
}

createCircles(4);
drawLines();
drawCircles();

Answer 2

这是一个能够实现您所要求的解决方案。

我宣布了3个班级＆＃39;使事情更清晰易读。首先，我定义一个通用的形状类。接下来，我定义一个基本的圆类。最后，我定义了一个vec2类。您可以像我一样轻松扩展它，并添加从形状类继承的其他形状 - 即方形三角形等。

我在随机位置和半径创建10个圆圈。然后我在每个圆圈和跟随它的圆圈之间画一条线。我并没有因为包裹而烦恼。 case，所以我绘制了10个圆圈和9个线条（我没有从圆圈9绘制到圆圈0）

我已经使用了Tamura剩下的一些代码，因此熟悉了画布的尺寸和ID。

<!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>

点击此处观看直播演示：http://jsfiddle.net/YYjYL/

Answer 3

这是JSFIDDLE链接：http://jsfiddle.net/WfF3v/1/。这就是你想要的吗？

以下是JS代码：

function draw_circle(center_x, center_y){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = center_x;
var centerY = center_y;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
}

function draw_line(center1_x, center1_y, center2_x, center2_y) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(center1_x, center1_y);
context.lineTo(center2_x, center2_y);
context.stroke();
}

draw_circle(100,100);
draw_circle(300,200);
draw_line(100,100,300,200);

JS从圆的边缘到另一个圆边绘制一条线

3 个答案: