HTML5 - Canvas Radial Gradient形状边

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

因为我需要显示时钟，如：

• quater past - 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 to - 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

这是您的首发代码。

它沿着圆周绘制矩形，为你提供一些＆＃34; jaggies＆＃34;。

它显示更均匀的＆＃34; jaggies＆＃34;比你想要的图像，但你可以随机化你的宽度，高度和矩形的间距，以使其结果不太均匀。

＆＃13;

＆＃13;

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

＆＃13;

#canvas{border:1px solid red;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;