如何删除html画布中不需要的行?

问题描述 投票:1回答:1

我想知道如何删除在我的大脑之间创建的线。在学校,我们应该在一个HTML页面中创建Brownian Motion,并在其中将画布分组,而我是应该绘制画布和分子的人。因此,我做了以下代码,在其中创建了一个ctx.arc来制作一个圆,并为400个分子放置了随机坐标,但是在每个圆之间绘制了一条线,因此它使我的画布看起来像艺术品...我们从html开始,我们的老师说我们必须在Internet上搜索才能找到一些解决方案,但我在这个问题上找不到任何东西。

所以我的代码是:

<!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>

My canvas (failed)

因此,如果有人可以帮助我解决不必要的线路问题,我将不胜感激:)

度过美好的一天/夜晚。

javascript html canvas line automatic-ref-counting
1个回答
1
投票

在while循环内,您必须调用函数“ beginPath”。

形成mozilla web docs

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>
© www.soinside.com 2019 - 2024. All rights reserved.