0

我正在尝试越来越多地了解 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;
}
4

2 回答 2

0

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

ctx.beginPath();

在定义每个圆之后，还应通过调用ctx.stoke()或ctx.fill() 来绘制每条弧。

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

于 2013-07-27T14:43:22.863 回答
0

@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();
于 2013-07-27T18:17:06.147 回答