JS绘制从一个圆的边缘上的线到另一圆边缘(JS drawing a line from the ed

我试图借鉴在HTML5画布两个圆的边缘线。所以，我知道两个圆及其半径的中心坐标。

圆随机抽取。
行应该从一个圈子到另一个边缘移动。

请帮忙！

PS对不起，我的英文:)

更新：

我想这一点，但如何认识角度？

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“班”，使事情更清晰易读。首先，我定义一个通用的形状类。接下来，我定义了一个基本的Circle类。最后，我定义了一个VEC 2类。您可以轻松地扩展这个，因为我已经做了，并补充说，从形状类继承其他形状 - 即方形三角形等

我创建在随机位置和半径10圈。然后我绘制每个圆圈和一个跟随它之间的一条线。我不与“环绕式”的情况下麻烦，所以绘制圆10和9条线（我不从圆9绘制到圆0）

我已经使用了一些田村留下的代码，因此熟悉的尺寸和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 2:

3个步骤的解决方案：
- 建立所有的随机圆坐标（X，Y，R）。
- 绘制的所有线的中心之间，你认为合适。
- 绘制各界。

（！）

代码非常简单：

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

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 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 drawing a line from the edge of a circle to another circle edge