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

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

ctx.beginPath();

然后还应该在定义之后调用 ctx.stoke（）或 ctx.fill（） 来绘制每个弧。每个单圈。

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

Answer 2

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

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

2 个答案: