HTML5 / Canvas "玻璃" 圆形

Question

我需要呈现一个简单的图表，我希望图表区域中的点是玻璃质感的圆形/球体。 我可以找到许多使用Photoshop绘制这些的示例，但我不想使用库存图片； 我更喜欢在我的HTML5画布中绘制它们。 不过，我不是艺术家！

有许多HTML5画布问题，但我没有看到任何可以引导我解决此问题的内容。

希望能给出指向正确方向的建议。

- Kevin Buchan

---

你能链接到Photoshop的示例吗？如果我在做这个项目，我可能会直接使用这些示例，但是在画布上完成步骤。 - david

除非“玻璃”图像需要以某种方式更改，否则何必让画布来进行重负承担呢？只需使用 PNG。 - j08691

@j08691 - 嗯，我的原始计划是允许用户选择他们想要的颜色，但也许这不是一个好主意，我应该只建立一些可供参考的各种 .PNG 文件。感谢您的建议。 - Kevin Buchan

@david，您的评论似乎非常明显。我感到非常尴尬地说，这从未发生在我身上。我真的从不编写图形程序，所以这就是我要用的借口。作为一项练习，我可能会这样做，但很可能会采用其他人的建议构建.PNG文件。 - Kevin Buchan

Answer 1

您只需创建一个或多个径向渐变来适应所需的玻璃效果属性。这很容易完成！

只需要一个渐变：

// Create some gradient
var gradient = ctx.createRadialGradient(105, 105, 20, 120, 120, 50);
gradient.addColorStop(0, 'rgba(250,250,255,0)');
gradient.addColorStop(0.75, 'rgba(230,250,255,1.0)');
gradient.addColorStop(1, 'rgba(0,0,255,0)');

// draw the gradient (note that we dont bother drawing a circle, this is more efficient and less work!)
// but make sure it covers the entire gradient
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300);​

可以做到这样:

实时示例:

http://jsfiddle.net/GTbjk/

也许你想控制一下模糊的边缘:

gradient.addColorStop(0.8, 'rgba(0,0,255,0)');
gradient.addColorStop(1, 'rgba(0,0,255,0)');

http://jsfiddle.net/GTbjk/1/

我不会按你的需求制作，因为你没有提供说明，而且这也不是我们在这里的目的。制作这些将几乎完全依赖于适当放置的辐射渐变，所以去试试吧！

正如j08691指出的那样，这是一个非常低效的方法来制作它们，除非你想让它们具有动态或可扩展性，否则最好只制作图像并使用ctx.drawImage。

- Simon Sarris

---

Simon，这非常视觉上令人愉悦。你用如此少的代码让它看起来如此漂亮，我真的需要一本关于计算机图形学的书。正如我在上面的评论中提到的，我的原始计划是允许灵活选择颜色，但也许这并不必要，我应该只构建一个包含20个左右的.PNG文件的集合并引用它们。再次感谢你，Simon！ - Kevin Buchan