HTML5/Canvas "Glass"圆形

Question

我需要渲染一个简单的图表，我希望图表区域中的点看起来像玻璃状的圆圈/球体。我可以找到大量使用 Photoshop 绘制这些图像的示例，但我不想使用库存图像；我更喜欢在我的 HTML5 Canvas 中绘制它们。不过我不是艺术家!

有很多 HTML5 canvas 问题，但我没有看到任何可以引导我找到这个解决方案的问题。

如果指出正确方向，我们将不胜感激。

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