创建软圆圈HTML5

Question

我使用HTML5 Canvas创建了圈子。我希望它们看起来像用Photoshop完成的柔软圆形画笔。在此代码中，我只能创建具有特定不透明度的圆圈：

 function drawClusters(ctx) {

var startPoint = (Math.PI/180)*0;
var endPoint = (Math.PI/180)*360;

ctx.beginPath();
ctx.arc(30,30,10,startPoint,endPoint,true); // x, y, r
ctx.fillStyle = "rgb(255,255,204)";
ctx.globalAlpha = 0.5;

ctx.fill();
ctx.closePath();
}

如何实现柔和的圆形效果？如下图所示：

Answer 1

http://jsfiddle.net/pr9r7/2/ - v2，解决了重叠问题。

function my_circle(ctx, x, y, size, color1, color2){
    var color1_rgb = hex2rgb(color1);
    var color2_rgb = hex2rgb(color2);
    var radgrad = ctx.createRadialGradient(
        x, y, size*0,
        x, y, size);
    radgrad.addColorStop(0, "rgba("+color1_rgb.r+", "+color1_rgb.g+", "+color1_rgb.b+", 1)");
    radgrad.addColorStop(1, "rgba("+color2_rgb.r+", "+color2_rgb.g+", "+color2_rgb.b+", 0)");
    ctx.fillStyle = radgrad;
    ctx.fillRect(x-size,y-size,size*2,size*2);
    }

Answer 2

这可能不是答案（因为它不使用画布，而是纯HTML和CSS），但是你的问题让我玩了一点：）

http://jsfiddle.net/n5axu/

可以使用box-shadow css property对DIV进行样式设置以获得类似的圈子。

HTML

<div class="circle white"></div>

CSS

.circle {
  height: 0;
  width: 0;
  box-shadow: 0 0 70px 60px;
  position: fixed;
}
.circle.white  { color: white; }
body { background-color: black; }