画布上旧圆圈的颜色重新着色，为什么？

Question

我正在尝试越来越多地了解 HTML5/CSS3 和 Javascript 的组合。 这就是为什么我想，做一个小项目，让你了解更多。

简而言之，我喜欢新的 iOS7 壁纸并在我的网站 (http://www.betadevelops.com) 上使用它。然后我想，让我们让它更轻量级，并用纯 Javascript 绘制它。 我开始并设法走得很远（http://www.betadevelops.com/jOS7.html）。但现在我面临一个似乎无法解决的愚蠢问题。

我在画布上绘制圆圈，并为它动态分配颜色。但是每次一个新圆圈（因此选择了一种新颜色）时，它都会自动重新着色旧圆圈...... 假设有 10 个圆圈： 1：蓝色圆圈，画好了 2：黄色圆圈，画完就完成了，但它也将第一个蓝色圆圈着色为黄色

我还想添加不透明度和模糊效果。不透明度有点起作用，因为它在我绘制的 20 个圆圈中只有 2-3 个圆圈具有不透明度。我认为这是不可能的，因为我使用 Math.Random 计算随机不透明度。 考虑到模糊，我可以使用以下代码为整个画布添加模糊

canvas.style.webkitFilter = "blur(3px)";

但这不是我想要的。我想要圆圈本身的模糊，更准确地说，是轮廓。我读过它，但这是不可能的，但你可以使用 CSS box-shadow 模仿外观。 所以我尝试了

canvas.style.webkitFilter = "box-shadow(10px 10px 5px #888)";

但这似乎也不起作用......

所以，你的网站大师。我做错了什么，你能帮帮我吗？ 您可以通过单击第二个链接找到代码。在那里上传。

编辑： 没关系模糊，设法用这段代码部分解决它

if (blurred) {
     ctx.shadowColor = color;
     ctx.shadowBlur = 15;
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
}

Answer 1

@Stig Runar Vangen 有正确答案。

我只想补充一点，如果您不打算让圆圈“运行”，您可以在绘制每个 ctx.arc 后使用 ctx.closePath。

ctx.beginPath();
ctx.arc(centerX, centerY, diameter, 0, 2 * Math.PI, false);
ctx.closePath();
color = color.replace('opacity', Math.random().toString());
ctx.fillStyle = color;
ctx.fill();

Answer 2

您看到所有圆圈的颜色都相同的原因可能是因为您将所有圆圈加入到一个绘制操作中。要分离每个圆形绘制操作，请使用以下命令开始每个圆形放置：

ctx.beginPath();

每条弧线也应该通过调用 ctx.stoke() 或 ctx.fill() 在定义之后绘制每个单独的圆圈。

这纯粹是猜测，因为我没有看到你的代码。