createRadialGrafik ve saydamlık

Question

HTML5 tuvalinde createRadialGradient() ile oynuyorum. Uygulamayı (yarı-saydamlık) uygulamaya çalıştığım zamanlar dışında bir çekicilik gibi çalışır.

Bu jsFiddle'ı umarım daha net bir şey yapmak için yaptım: http://jsfiddle.net/rfLf6/1/. Ne oluyor

function circle(x, y, r, c) { 
    ctx.beginPath(); 
    var rad = ctx.createRadialGradient(x, y, 1, x, y, r); 
    rad.addColorStop(0, c); 
    rad.addColorStop(1, 'transparent'); 
    ctx.fillStyle = rad; 
    ctx.arc(x, y, r, 0, Math.PI*2, false); 
    ctx.fill(); 
} 

ctx.fillRect(0, 0, 256, 256); 

circle(128, 128, 200, 'red'); 
circle(64, 64, 30, 'green'); 

bir çember (radyal gradyan) yarıçapı r ile (x, y) boyalı olduğu ve renk durur r ve 'transparent' bulunmaktadır. Bununla birlikte, yeşil daire yeşilden siyah no.lu renge gidiyor, bu arada şeffaflığa, yani arkaplan dairesinin uygun kırmızı renklerine gitmelidir.

HTML5 tuvalinde saydam radyal degradeler nasıl uygulanır? madem sordun

Answer 1

Eh,:

Ben JavaScript <canvas> kullanma hakkında pek fazla bilgim yok, ama CSS3 degrade hakkında biliyorum ve şeffaflık ile çalışmak için her zamanki gibi rgba renkler kullanmaktır.

Degrade'yi "soldurma" işlemini saydam yapmak için, aynı rengin saydam bir sürümünü ekleyebilirsiniz. Bunu yaparken "doğru yöntemin" emin değilim http://jsfiddle.net/thirtydot/BD3xA/