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 + 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));
• 四到 - 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));

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>