如何在画布上绘制带有alpha渐变的圆圈？

Question

如何使用alpha渐变在这张照片上画画？

Answer 1

请在下次指定Android浏览器上的Android应用程序画布或HTML5画布。如果是前者，请使用android-canvas。这个解决方案在JS中很容易显示，并且可以在任何平台上正常工作。

画布中沿路径的渐变很难。最简单的方法就是捏造它。

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

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

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

现在想象一个圆圈切入：

这就是你要做的一切。

要像通过最容易使用的剪辑区域那样“剪切”，所以我做了一个例子。

以下是实例：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