html - 创建软圆形 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

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

http://jsfiddle.net/n5axu/

可以使用box-shadowcss 属性设置 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; }

Answer 2

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);
    }