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>