HTML5 - Tuval Radyal Gradient şekil kenar

Question

Kodum:

:

Bu sonuç almak istiyorum: Ben bu sonucu elde

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

Daire içinde şekil kenarı yapmak için herhangi bir yol var mı? ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 1*(0.5*Math.PI));

buçuk - - ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 2*(0.5*Math.PI));

dörtlü için - ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 3*(0.5*Math.PI));

tüm saatte - ctx.arc(w/2, h/2, r, 1.5*Math.PI, 1.5*Math.PI + 4*(0.5*Math.PI));

• dörtlü geçmiş:

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

  Ben gösteren gerek Çünkü saat gibi: değişim olmadan

Answer 1

İşte sizin için başlangıç ​​kodu.

Bazı "jaggiler" vermek için bir dairenin çevresi boyunca dikdörtgenler çizer.

İstediğiniz görüntüden daha düzgün "jaggiler" görüntüler, ancak daha az düzgün bir sonuç elde etmek için genişlik, yükseklik ve dikdörtgenlerin aralığını rasgele olarak oynatabilirsiniz.

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>