Как удалить ненужные строки в html canvas? - PullRequest
Новая
       27

Как удалить ненужные строки в html canvas?

1 голос
/ 09 февраля 2020

Я хотел бы знать, как удалить линии, которые создаются между моими церквами. В школе мы должны создать броуновское движение на странице html с холстом в группах, а я должен рисовать холст и молекулы. Поэтому я сделал следующий код, где создал ctx.ar c, чтобы сделать круг, и я поместил случайные координаты для 400 молекул, но между каждым кругом рисуется линия, поэтому мой холст выглядит как рисунок ... Мы начинаем с html, и наши учителя сказали, что нам придется искать в Inte rnet, чтобы найти какие-то решения, но я не могу найти ничего по этому вопросу.

Итак, мой код: 

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Canvas
</title>
</head>
<body>
<canvas id="canvas" width="800" height="500" style="border:1px solid #000000;">
Sorry, your browser can't support this canvas
</canvas>
<script>
function draw()
{
  var canvas = document.getElementById("canvas"); 
  var ctx = canvas.getContext("2d");
  let i = 0;
  while (i<400){
    ctx.arc(Math.random()*((796-(5))+5), Math.random()*((496-(5))+5), 4, 0, 2 * Math.PI);
	i++;
	}
  ctx.stroke();
  
}
draw();  
</script>
</body>

Мой холст (не удалось)

Так что, если кто-то может помочь мне с этой проблемой нежелательных линий, я был бы благодарен :)

Хорошего дня / ночи.

1 Ответ

1 голос
/ 09 февраля 2020

Внутри вашего времени l oop вы должны вызвать функцию beginPath.

Форма веб-документов Mozilla

beginPath ()

Создает новый путь. После создания будущие команды рисования направляются в путь и используются для построения пути. 

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Canvas
</title>
</head>
<body>
<canvas id="canvas" width="800" height="500" style="border:1px solid #000000;">
Sorry, your browser can't support this canvas
</canvas>
<script>
function draw()
{
  var canvas = document.getElementById("canvas"); 
  var ctx = canvas.getContext("2d");
  let i = 0;
  
  let radius = 4; // Arc radius
  let startAngle = 0; // Starting point on circle
  let endAngle = 2 * Math.PI; // End point on circle
  let anticlockwise = true; // clockwise or anticlockwise
  
  while (i<400)
  {
    ctx.beginPath(); 
    
    let x = Math.random()*((796-(5))+5); // x coordinate
    let y = Math.random()*((496-(5))+5); // y coordinate
    
    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise );
		
    ctx.stroke();
    
    i++;
	}
  
  
  
}
draw();  
</script>
</body>
...