如何在HTML5画布上绘制一个带有中心渐变淡出效果的圆？

Question

我如何使用渐变来绘制一个逐渐消失的圆形？

我的意思是像这样的： 变得越来越暗...

- user2336726

---

我的意思是像径向渐变一样... - user2336726

Answer 1

你想要使用 ctx.createRadialGradient() 方法。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var x = 100,
    y = 75,
    // Radii of the white glow.
    innerRadius = 5,
    outerRadius = 70,
    // Radius of the entire circle.
    radius = 60;

var gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'blue');

ctx.arc(x, y, radius, 0, 2 * Math.PI);

ctx.fillStyle = gradient;
ctx.fill();

示例： http://jsfiddle.net/razh/sA6Wc/

- Raymond Zhou

---

这里有一个基于被接受的答案的不错的粒子：http://jsfiddle.net/sA6Wc/422/ - Ray Hulha