Làm thế nào để vẽ một vòng tròn với các tiêu điểm mờ dần ở giữa với HTML5 Canvas?

Question

Làm thế nào tôi có thể vẽ một vòng tròn có độ mờ dần dần?

Ý tôi là một cái gì đó như thế này:

http://i.imgur.com/ZJBKe6z.png

, nhận tối hơn và sẫm màu hơn ...

Answer 1

Bạn muốn sử dụng phương pháp 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(); 

Ví dụ:http://jsfiddle.net/razh/sA6Wc/