Comment Dessiner un Cercle Centré Fadeing Hors Dégradés avec HTML5 Canvas?

Comment puis-je dessiner un cercle avec fadeing hors dégradés?

Je veux dire quelque chose comme ceci:

Comment Dessiner un Cercle Centré Fadeing Hors Dégradés avec HTML5 Canvas?

Devient plus sombre et plus sombre...

Je veux dire un dégradé radial...

OriginalL'auteur user2336726 | 2013-05-11

  1. 22

    Vous souhaitez utiliser le ctx.createRadialGradient() méthode.

    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();

    Exemple: http://jsfiddle.net/razh/sA6Wc/

    Voici une belle de particules basé sur le acceptées réponse: jsfiddle.net/sA6Wc/422

    OriginalL'auteur Raymond Zhou