在画布中绘制圆圈之间的垂直线 [英] Draw vertical line between circles in canvas
问题描述
我想在我的项目中的圆圈之间画一条垂直线。
I want draw a vertical line between circles in my project.
和这些是我的代码：
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();
如何在圆圈之间绘制垂直线？当我试图这样做成为这个形象：
How I can draw a vertical line between circles? when I tried to do this become this image:
这是我的js代码：
var canvas = document.getElementById('col221');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(290, -100);
context.lineTo(290, 80);
context.stroke();
请帮助解决这个问题！
谢谢哦！
please help for this problem!
thank u!
推荐答案
我不知道为什么你选择使用多个画布，但我已经实现了一个更通用的解决方案在我的 fiddle here。
I'm not sure why you're opting to use multiple canvases but I have implemented a more generic solution in my fiddle here.
它使用两个循环定义为：
It uses two loops defined as:
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
...
}
}
这使它更灵活，因为您可以在脚本中指定行和列。
This makes it more flexible as you can specify the rows and columns in the script. The rest is just knowing what your offsets are!
实现圆的代码很大程度上没有改变，但有趣的是绘制一行时：
The code to implement the circle is largely untouched, but the fun is when to draw a line:
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);
}
这就是说你应该在每一列为最后一个。这个工作相当不错，即使你有一行一列。您还想要绘制一条垂直线，当有多个行，并偏移它看起来像它加入到上一行。
All this is saying is that you should draw a horizontal line on every column except for the last one. This works pretty well, even when you have one row by one column. You also want to draw a vertical line when there is more than one row, and offset it so it looks like it joins onto the previous row.
编辑：注意到你有不同的x和y距离，因此我修改了小提琴来解释这个问题。
Noticed you have different x and y distances, so I modified the fiddle to account for this.
这篇关于在画布中绘制圆圈之间的垂直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
