如何在畫布圓片中添加圖片？

Question

我正試圖在畫布的每一片上創建一個帶有圖像的輪盤。到目前爲止，我成功地創建了一個圓圈並旋轉了該圓圈。下面是一個示例代碼：

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

 
for (var i = 0; i < 8; i++) { 
 
    ctx.beginPath(); 
 
    ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', 95, 180)'; 
 
    // We have to add this, otherwise, it will fill the minimum area needed to fill the arc 
 
    ctx.moveTo(300, 300); 
 
    ctx.arc(300, 300, radius, i * Math.PI/4, (i + 1) * ((Math.PI/4)), false); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
} 
 

 
ctx.stroke();

#myCanvas { 
 
    border: 1px solid #d3d3d3; 
 
}

<canvas id="myCanvas" width="500" height="500"> 
 
Your browser does not support the HTML5 canvas tag. 
 
</canvas>

它創建片的圓。現在我想要做的是將圖像放入這些切片中。我使用了drawImage（），但它沒有達到我的目的。所以如果有人知道任何解決方法，請親切地回答。我被困在這個問題上已經有4天了。

Answer 1

這個答案是基於關閉的這一點：

canvas clip image in a circle

var canvas = document.getElementById('circle'), 
 
    ctx = canvas.getContext('2d'), 
 
    offsetX = -116, 
 
    offsetY = 8, 
 
    centerX = 228, 
 
    centerY = 100, 
 
    radius = 100, 
 
    slices = 8; 
 

 
let slice = 0; 
 
ctx.font = "20px Arial"; 
 

 
var imageObj = new Image(); 
 
imageObj.onload = function() { 
 
    setInterval(drawSlice, 250); 
 
}; 
 
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
 

 
function drawSlice() { 
 
    var cx = centerX + offsetX, 
 
     cy = centerY + offsetY, 
 
     angleStart = (2 * Math.PI) * (slice/slices), 
 
     angleEnd = (2 * Math.PI) * (((slice + 1) % slices)/slices); 
 
     
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.fillText("Current slice: " + (slice + 1) + '/' + slices, centerX, cy); 
 
    
 
    ctx.save(); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(cx, cy); 
 
    ctx.arc(cx, cy, radius, angleStart, angleEnd, false); 
 
    ctx.lineTo(cx, cy); 
 
    ctx.clip(); 
 
    ctx.drawImage(imageObj, offsetX, offsetY); 
 
    
 
    ctx.strokeStyle = 'red'; 
 
    ctx.lineWidth = 4; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(cx, cy); 
 
    ctx.arc(cx, cy, radius, angleStart, angleEnd, false); 
 
    ctx.lineTo(cx, cy); 
 
    ctx.stroke(); 
 
    ctx.restore(); 
 
    
 
    slice = (slice + 1) % slices; 
 
};

#circle { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<canvas id="circle" width="500" height="500"></canvas>