Wie füge ich Bilder in Canvas-Kreisscheiben hinzu?

Question

Ich versuche ein Roulette mit Bild auf jeder Leinwand zu erstellen. Bisher gelingt es mir, einen Kreis zu kreieren und diesen Kreis zu drehen. Hier ist ein Beispielcode:

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>

Es einen Kreis mit Scheiben erzeugt. Nun versuche ich, Bilder in diese Scheiben zu legen. Ich habe drawImage() benutzt, aber es hat meinen Zweck nicht erfüllt. Also bitte, wenn jemand eine Lösung kennt, bitte beantworten Sie es. Es waren 4 Tage, an denen ich in dieser Ausgabe feststecke.

Answer 1

wird aus dieser Diese Antwort basiert:

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>