在 HTML5 Canvas 上绘制多个圆圈的问题

2022-01-17 00:00:00 jquery javascript html html5-canvas

你能不能请看看这个演示，让我知道我怎么画画布中有多个不同坐标的圆圈而不重复一堆代码?

Can you please take a look at this demo and let me know how I can draw multiple circles in a canvas with different coordinate without repeating bunch of codes?

正如您在 Demo 和以下代码中看到的那样

As you can see on Demo and following code

var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(150, 50, 5, 0, Math.PI * 2, true);
ctx.arc(20, 85, 5, 0, Math.PI * 2, true);
ctx.arc(160, 95, 5, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

我尝试将它们放在 ctx 下，但它不正确，因此我尝试使用 for 循环创建 50 个点，但我在重复和添加类似 ctx.fill() 的代码时遇到问题；为他们所有人.你能告诉我如何解决这个问题吗?

I tried to have them under ctx but it is not correct so I tried to use for loop to create 50 points but I have issue on repeating and adding code like ctx.fill(); for all of them. Can you please let me know how I can fix this?

谢谢

推荐答案

这是因为你没有关闭路径，无论是使用 fill() 还是 closePath()将关闭路径，因此它不会尝试连接所有项目.fill() 填充圆圈并关闭路径，以便我们可以使用它.您还需要使用 beginPath()，以便它们彼此分开.这是你的三个圈子:

This is because you are not closing the path, either using fill() or closePath() will close the path so it does not try and connect all the items. fill() fills in the circles and closes the path so we can just use that. Also you need to use beginPath(), so that they are separate from each other. Here is your three circles:

var coords = [ [150,50], [20,85], [160,95] ];

for(var i = 0; i < coords.length; i++){
    ctx.beginPath();
    ctx.arc(coords[i][0], coords[i][1], 5, 0, Math.PI * 2, true);
    ctx.fill();
}

为了不重复一堆代码并拥有唯一的坐标，将您的 X 和 Y 位置存储在一个数组中，并使用 for 循环来通过它.

To not repeat a bunch of code and have unique coordinates store your X and Y position in an array and use a for loop to go through it.

更新:

实现相同效果的更有效方法是仅使用单个路径并使用 moveTo() 而不是在绘制每个圆圈时创建新路径:

A more efficient way to do which achieves the same effect this would be to only use a single path and use moveTo() instead of creating a new path when drawing each circle:

ctx.beginPath();
for(var i = 0; i < coords.length; i++){
    ctx.moveTo(coords[i][0], coords[i][1]);
    ctx.arc(coords[i][0], coords[i][1], 5, 0, Math.PI * 2, true);
}
ctx.fill();

相关文章