Как бы выравнивать круги по горизонтали с помощью петель?

Мне удалось получить круги друг на друга, но я не знаю, как сделать линию кругов, которые не пересекаются.Как бы выравнивать круги по горизонтали с помощью петель?

Это то, что я получил до сих пор.

HTML

<!DOCTYPE html> 
<html> 
    <head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
    <canvas id="myCanvas" width="800" height="600"></canvas> 
    <script src="js/main.js"></script> 
</body> 
</html>

JavaScript

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext('2d'); 

for(var i = 0; i < 10; i++) { 
    ctx.fillStyle="rgba(0,0,0,0.5)"; 
    fillCircle(200,200,i*20) 
} 

var width = window.innerWidth; 
var height = 100; 

function fillCircle(x, y, radius) { 
    ctx.beginPath(); 
    ctx.arc(x, y, radius, 0, Math.PI * 2); 
    ctx.closePath(); 
    ctx.fill(); 
}

источник

2015-02-17 Mark Gregg

Oops! Я изначально ответил на ваш вопрос, показывая вертикальное выравнивание. Я вижу, что вы хотите горизонтальное выравнивание и отредактировали мой ответ. :-) – markE

enter image description here

Х-значение любого следующего круга должен быть по крайней мере равно сумме текущего и следующего круга радиусы за пределами x-значения текущего круга.

Так что если:

var currentCircleX=20 
var currentCircleRadius=15 
var nextCircleRadius=25

Тогда:

var nextCircleX = currentCircleX + currentCircleRadius + nextCircleRadius

Но если вы также поглаживая круги:

Поскольку контекст инсульта продлит половинной вне определенного пути, вы также должны добавить половину t он LineWidth для каждого круга, чтобы избежать прикосновения кругов:

// account for the lineWidth that extends beyond the arc's path 
var nextCircleX = 
    currentCircleX + currentCircleRadius + nextCircleRadius + context.lineWidth

Пример кода и демо:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
ctx.fillStyle="rgba(0,0,0,0.5)"; 
 
var currentCircleX=0; 
 
var currentCircleRadius=0; 
 

 
for(var i = 0; i < 10; i++) { 
 
    var nextCircleRadius=i*20; 
 
    var nextCircleX=currentCircleX+currentCircleRadius+nextCircleRadius; 
 
    fillCircle(nextCircleX,200,nextCircleRadius); 
 
    currentCircleX=nextCircleX; 
 
    currentCircleRadius=nextCircleRadius; 
 
} 
 

 

 
function fillCircle(x, y, radius) { 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, radius, 0, Math.PI * 2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

источник

2015-02-17 17:36:58 markE

Большое спасибо, это мне очень помогло! –

Как бы выравнивать круги по горизонтали с помощью петель?

ответ

Смежные вопросы