我需要绘制动态圆环图 - 类似于 -
http://194.90.28.56/~dev1/t.jpg
绿色部分表示百分比(在这种情况下为27%) - 它必须是动态的。
我想我需要做一些像 - Android - How to draw an arc based gradient
这样的事情但是用JS ..
感谢。
答案 0 :(得分:13)
好问题。画布中沿路径的渐变很难。最简单的方法就是捏造它。
不要将图像视为遵循圆形路径的渐变,而应将其视为两个线性渐变。
想象一个由这两个渐变构成的正方形:
现在想象一个圆圈切入:
这就是你要做的一切。
要像通过最容易使用的剪辑区域那样“剪切”,所以我做了一个例子。
以下是实例: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