我想知道如何删除在我的大脑之间创建的线。在学校,我们应该在一个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>
因此,如果有人可以帮助我解决不必要的线路问题,我将不胜感激:)
度过美好的一天/夜晚。
在while循环内,您必须调用函数“ beginPath”。
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>