HTML5 / Canvas“Glass”Circle

Question

我需要渲染一个简单的图表，我希望这些点在图表区域中是玻璃般的圆形/球体。我可以找到大量用Photoshop绘制这些图片的例子，但我不想使用图片图片;我更喜欢在我的HTML5画布中绘制它们。不过我不是艺术家！

有很多HTML5画布问题，但我没有看到任何导致我这个解决方案的东西。

正确的方向上的一点将是最受欢迎的。

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