캔버스 내에서 반지를 어떻게 자르 죠?

Question

나는 똑같이 다섯 부분으로 나누어지는 반지를 만들려고합니다. JS/JQuery를 처음 접했을 때 내 방식이 정통 적이 될 수 있습니다. 아래는 내가 가지고있는 코드 :

var c=document.getElementById("c"); 
var ctx=c.getContext("2d"); 

ctx.beginPath(); 
ctx.arc(430,430,300,0,2*Math.PI,true);//x-y-r-angle-PI-rotation(clockwise vs anti// 
ctx.closePath(); 
ctx.strokeStyle="#000"; 
ctx.stroke(); 

ctx.save(); 
ctx.beginPath(); 
ctx.arc(430,430,200,0,2*Math.PI); 
ctx.closePath(); 
ctx.strokeStyle="#000"; 
ctx.stroke(); 
ctx.clip(); 


var drawAngledLine = function(x, y, length, angle) { 
    var radians = angle/180 * Math.PI; 
    var endX = x + length * Math.cos(radians); 
    var endY = y - length * Math.sin(radians); 

    ctx.beginPath(); 
    ctx.moveTo(x, y) 
    ctx.lineTo(endX, endY); 
    ctx.closePath(); 
    ctx.stroke(); 
} 
ctx.strokeStyle = "#000"; 
ctx.lineWidth = "1"; 

drawAngledLine(430, 430, 300, -90); 
drawAngledLine(430, 430, 300, -162); 
drawAngledLine(430, 430, 300, -234); 
drawAngledLine(430, 430, 300, -306); 
drawAngledLine(430, 430, 300, -18); 

ctx.restore(); 
ctx.beginPath(); 
ctx.arc(430,430,200,0,2*Math.PI,true); 
ctx.strokeStyle="#000"; 
ctx.stroke(); 

내가 ctx.clip를 사용하려고했습니다(); 하지만 줄의 내부를 잘라내어 내부를 가리고 원 안쪽과 바깥 쪽 원 사이를 연결하는 선만 표시하고 싶습니다. 이미지가 없으면 설명하기가 어렵습니다 ...

누군가의 도움을주십시오. 미리 환호하십시오.

Answer 1

몇 가지 방법이 있습니다. 먼저 슬라이스로 원을 그린 다음 배경과 같은 색으로 원 위에 그려서 전체 원이 아닌 링처럼 보이게 만듭니다. 캔버스 전체 구도를 캔버스의 실제 구멍 인 원호 부분 인 destination-out으로 변경한다는 점을 제외하면 위의 다른 방법과 같습니다.

Live Demo

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

    canvas.width = canvas.height = 256; 

    function toRadians(deg) { 
     return deg * Math.PI/180 
    } 


    slicedRing(128,128,5,50,20); 

    function slicedRing(x,y,sect,r,w){ 
     var slice = 360/sect; 

     ctx.fillStyle = "rgb(255,0,0)"; 
     ctx.strokeStyle = "#fff"; 

     for(var i = 0; i < sect; i++){ 
      ctx.beginPath(); 
      ctx.moveTo(x,y); 
      ctx.arc(x,y,50,toRadians(slice*i),toRadians((slice*i)+slice)); 
      ctx.fill(); 
      ctx.lineTo(x,y); 
      ctx.stroke(); 
      ctx.closePath(); 
     } 

     // either change this to the background color, or use the global composition 
     ctx.globalCompositeOperation = "destination-out"; 
     ctx.beginPath(); 
     ctx.moveTo(x,y); 
     ctx.arc(x,y,w,0,Math.PI*2); 
     ctx.fill(); 
     ctx.closePath(); 

     // if using the global composition method, make sure to change it back to default. 
     ctx.globalCompositeOperation = "source-over"; 
    }