1

HTML5 Canvas を使用して円を作成しました。フォトショップで描いたやわらかい丸いブラシのようにしたいです。このコードでは、特定の不透明度を持つ円のみを作成できます。

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

ソフトラウンド効果を実現するにはどうすればよいですか? 次の画像のようなもの： ここに画像の説明を入力

4

2 に答える 2

3

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);
    }
于 2013-10-30T13:57:42.057 に答える
3

これはおそらく答えではありません (キャンバスではなくプレーンな HTML と CSS を使用しているため)、しかし、あなたの質問は私に少し遊んでもらいました :)

http://jsfiddle.net/n5axu/

DIV はbox-shadowcss プロパティを使用してスタイルを設定し、同様の円を取得できます。

ここに画像の説明を入力

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; }
于 2013-10-30T14:08:09.047 に答える