在HTML5画布上绘制多个圆的问题 [英] Issue on Drawing Multiple Circles on 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?

如您在演示和以下代码中所见

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.

更新:

一种更有效的方法来达到相同的效果，这将是仅使用单个路径并使用

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();

这篇关于在HTML5画布上绘制多个圆的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！