在 canvas 中的圆圈之间绘制垂直线

Question

我想在我的项目中的圆圈之间画一条垂直线。

这些是我的代码：

html:

    <div id="ways" style="width:1000px;margin:0 auto;height:100%;">
        <div id="row1">
            <div id="col11" class="r1"><canvas id="col111" width="578" height="200"></canvas></div>
            <div id="col12" class="r1"><canvas id="col112" width="578" height="200"></canvas></div>
            <div id="col13" class="r1"><canvas id="col113" width="578" height="200"></canvas></div>
        </div>
        <div id="row2">
            <div id="col21" class="r1"><canvas id="col221" width="578" height="200"></canvas></div>
            <div id="col22" class="r1"><canvas id="col222" width="578" height="200"></canvas></div>
            <div id="col23" class="r1"><canvas id="col223" width="578" height="200"></canvas></div>
        </div>
        <div id="row3">
            <div id="col31" class="r1"><canvas id="col331" width="578" height="200"></canvas></div>
            <div id="col32" class="r1"><canvas id="col332" width="578" height="200"></canvas></div>
            <div id="col33" class="r1"><canvas id="col333" width="578" height="200"></canvas></div>
        </div>
    </div>

这些都是js代码：

var canvas = document.getElementById('col111');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                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();

                var canvas = document.getElementById('col112');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                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();

                var canvas = document.getElementById('col113');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                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();


                var canvas = document.getElementById('col221');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                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();

                var canvas = document.getElementById('col222');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                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();

                var canvas = document.getElementById('col223');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                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();

如何在圆圈之间画一条垂直线？当我尝试这样做时变成了这个图像：

这是我的 js 代码：

 var canvas = document.getElementById('col221');
            var context = canvas.getContext('2d');
            context.beginPath();
            context.moveTo(290, -100);
            context.lineTo(290, 80);
            context.stroke();

请帮忙解决这个问题！
谢谢你！

Answer 1

我不确定您为什么选择使用多个画布，但我在 fiddle here.

中实施了一个更通用的解决方案

它使用定义为的两个循环：

for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
        ...
    }
}

这使得它更加灵活，因为您可以在脚本中指定行和列。剩下的就是知道你的偏移量是多少！

实现圆的代码基本上没有改动，但有趣的是何时画线：

if (j != cols - 1) {
    // Draw horizontal line
    var hLineX = x + radius;
    var hLineY = y;
    context.moveTo(hLineX, hLineY);
    context.lineTo(hLineX + distance + lineWidth, hLineY);
}
if (i > 0) {
    // Draw vertical line
    var vLineY = y - radius - distance - lineWidth;
    context.moveTo(x, vLineY);
    context.lineTo(x, vLineY + distance + lineWidth);
}

这就是说，除了最后一列外，您应该在每一列上画一条水平线。这工作得很好，即使你有一行一行。当有多行时，您还想画一条垂直线，并偏移它，使其看起来像连接到前一行。

编辑：注意到你有不同的 x 和 y 距离，所以我修改了 fiddle 来解决这个问题。

在 canvas 中的圆圈之间绘制垂直线

Draw vertical line between circles in canvas

javascript

canvas

html5-canvas