圆形(ARC)渐变填充画布JS

Question

我需要绘制一个动态的圆环图 - 类似于 -

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

绿色部分表示百分比(在这种情况下为27%) - 它必须是动态的.

我想我需要做类似的事情 - Android - 如何绘制基于弧度的渐变

但是用JS ..

谢谢.

Answer 1

好问题.画布中沿路径的渐变很难.最简单的方法是捏造它.

不要将图像视为遵循圆形路径的渐变,而应将其视为两个线性渐变.

• 一个在左侧,从绿色到灰色,从上到下.
• 另一个在右侧,从白色到灰色,从上到下.

想象一下由这两个渐变构成的正方形:

现在想象一个圆形切入:

这就是你要做的一切.

为了"切割"它最容易使用的剪切区域,所以我做了一个例子.

这是现场的例子: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