javascript - キャンバス JS を使用した Circle(ARC) グラデーション塗りつぶし

Question

動的なドーナツ グラフを描画する必要があります - 次のようなものです -

http://194.90.28.56/~dev1/t.jpg

緑色の部分はパーセンテージ (この場合は 27%) を示します。これは動的でなければなりません。

私は次のようなことをする必要があると思います - Android - 円弧ベースのグラデーションを描く方法

しかし、JSで..

ありがとう。

Answer 1

素晴らしい質問です。キャンバスのパスに沿ったグラデーションは難しいです。最も簡単な方法は、それをごまかすことです。

画像を円形のパスをたどるグラデーションと考えるのではなく、2 つの線形グラデーションと考えてください。

• 左側に 1 つ、緑から灰色、上から下へ。
• 右側のもう 1 つは、白からグレー、上から下に移動します。

これら 2 つのグラデーションで構成される正方形を想像してください。

ここで、円が通り抜けることを想像してください。

それだけです。

そのように「カット」するには、クリッピング領域を使用するのが最も簡単なので、それを行う例を作成しました。

これが実際の例です: http://jsfiddle.net/simonsarris/Msdkv/

以下のコード！それが役立つことを願っています。

var greenPart = ctx.createLinearGradient(0,0,0,100);
greenPart.addColorStop(0, 'palegreen');
greenPart.addColorStop(1, 'lightgray');

var whitePart = ctx.createLinearGradient(0,0,0,100);
whitePart.addColorStop(0, 'white');
whitePart.addColorStop(1, 'lightgray');


var width = 20;
ctx.lineWidth = width;

// First we make a clipping region for the left half
ctx.save();
ctx.beginPath();
ctx.rect(-width, -width, 50+width, 100 + width*2);
ctx.clip();

// Then we draw the left half
ctx.strokeStyle = greenPart;
ctx.beginPath();
ctx.arc(50,50,50,0,Math.PI*2, false);
ctx.stroke();

ctx.restore(); // restore clipping region to default

// Then we make a clipping region for the right half
ctx.save();
ctx.beginPath();
ctx.rect(50, -width, 50+width, 100 + width*2);
ctx.clip();

// Then we draw the right half
ctx.strokeStyle = whitePart;
ctx.beginPath();
ctx.arc(50,50,50,0,Math.PI*2, false);
ctx.stroke();

ctx.restore(); // restore clipping region to default