如何在 canvas 上绘制像这张带 alpha 渐变的图片?
最佳答案
下次请说明您指的是 Android 应用 Canvas 还是 Android 浏览器上的 HTML5 Canvas 。如果是前者,请使用 android-canvas .这个解决方案是在 JS 中,因为它更容易显示,并且在任何一个平台上都可以正常工作。
Canvas 中沿路径的渐变很难。最简单的方法就是捏造它。
与其将您的图像视为沿圆形路径的渐变,不如将其视为两个线性渐变。
- 一个在左侧,从绿色到灰色,从上到下。
- 另一个在右侧,从白色到灰色,从上到下。
想象一下由这两个渐变组成的正方形:
现在想象一个圆圈穿过:
这就是您要做的全部。
要像这样“剪切”最简单的方法是使用剪切区域,所以我做了一个这样做的例子。
这是实际示例: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
关于android - 如何在 Canvas 上绘制带有 alpha 渐变的圆?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20034784/