HTML5 - キャンバス放射状グラデーション形状のエッジ

Question

マイコード：

：

が、私はこの結果を取得したい：私はこの結果を得る

var $c = $('#myCanvas'); 
$c.attr('width', $(window).innerWidth()); 
$c.attr('height', $(window).innerHeight() * 0.99);    
var cidx=0; 

function redraw() { 
    var ctx = $c.get(0).getContext('2d'); 
    var w = ctx.canvas.width; 
    var h = ctx.canvas.height; 
    var r = Math.min(w,h)/2; 
    ctx.clearRect(0,0,w,h); 

    ctx.beginPath(); 
    var grad = ctx.createRadialGradient(w/2,h/2, 0.94*r, w/2, h/2, 1*r); 
    grad.addColorStop(1, "transparent"); 
    grad.addColorStop(0.75, "red"); 
    ctx.fillStyle=grad; 
    ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 1*(0.5*Math.PI)); 
    ctx.fill();      
    ctx.restore(); 
}   

ここで円の形の端を作る方法はありますか？ ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 1*(0.5*Math.PI));

半分の過去 - - ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 2*(0.5*Math.PI));

QUATERへ - ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 3*(0.5*Math.PI));

全体の時間 - ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 4*(0.5*Math.PI));

• QUATERの過去：

  ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 1*(0.5*Math.PI)); 
  

  私は示す必要があるので、時計のように：変更なし

Answer 1

ここにあなたのスタートコードがあります。

円の円周に沿って長方形を描き、「ジャギー」を与えます。

これは、希望の画像よりも均一な「ジャギー」を表示しますが、矩形の幅、高さ、間隔を無作為化して再生することで、結果が不均一になります。

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
ctx.fillStyle='red'; 
 

 
var n=65; 
 
var cx=150; 
 
var cy=150; 
 
var r=125; 
 
var w=6; 
 
var h=8; 
 
var sAngle=-Math.PI/2; 
 
var eAngle=0; 
 

 
ctx.shadowColor='black'; 
 
ctx.shadowBlur=8; 
 
ctx.shadowOffsetX=1000; 
 
ctx.beginPath(); 
 
ctx.arc(cx-1000,cy,r-3,sAngle,eAngle); 
 
ctx.stroke(); 
 
ctx.stroke(); 
 
ctx.stroke(); 
 
ctx.shadowColor='rgb(0,0,0,0)'; 
 

 
for(var a=sAngle;a<eAngle;a+=Math.PI/n){ 
 
    var x=cx+r*Math.cos(a)-w/2; 
 
    var y=cy+r*Math.sin(a)-h/2; 
 
    ctx.fillRect(x,y,w,h); 
 
}

#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>