HTML5/Canvas "Glass" Circle

Question

シンプルなチャートをレンダリングする必要があります。チャートの円/びんがグラスのように見えます。私はPhotoshopでこれらを描画する例がたくさんありますが、ストック画像を使用したくないです。 HTML5のキャンバスに描画することをお勧めします。私は芸術家じゃない！

多くのHTML5キャンバスに関する質問がありますが、私にはこの解決策につながるものはありません。

正しい方向のポイントが最も高く評価されます。

Answer 1

あなたがしなければならないのは、望むガラスのオブジェクトのプロパティに合わせて、1つ以上の放射グラデーションを作成することだけです。それは簡単です！

ただ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/

使用すると、1つを提供していないと我々はとにかくためにここにいるものではないthatsのでしたので、私は、あなたの仕様にものを作るつもりはありません。これらを作ることは、ほぼ完全に放射状のグラジエントの仕事になるので、実験に行きましょう！

j08691はあなたがそれらを動的またはスケーラブルになりたい場合を除き、これはこれらを作るのは本当にinefficent方法です指摘しているように、あなただけの画像を作り、ctx.drawImage