如何用不同的图像填充画布圆弧？

// First, load our images
var srcs = ["https://images.pexels.com/photos/172292/pexels-photo-172292.jpeg?w=500&h=500&auto=compress&cs=tinysrgb",
  "https://static.pexels.com/photos/218434/pexels-photo-218434.jpeg?w=500&h=200&auto=compress&cs=tinysrgb"
];
var loaded = 0;

function onload() {
  if (++loaded >= srcs.length) drawImg();
}
var imgs = srcs.map(s => Object.assign(new Image, {
  onload: onload,
  src: s
}));


function rand(min, max) {
  return Math.random() * (max - min) + min;
}

var color = ['#fbc', '#f88', '#fbc', '#f88', '#fbc', '#f88', "#fbc", "#f67"];
var label = ['10', '200', '50', '100', '5', '500', '0', "jPOT"];
var slices = color.length;
var sliceDeg = 360 / slices;
var deg = rand(0, 360);
var speed = 0;
var slowDownRand = 0;
var ctx = canvas.getContext('2d');
var ctx1 = canvas.cloneNode().getContext('2d'); // create an offscreen context
var width = canvas.width; // size
var center = width / 2; // center
var isStopped = false;
var lock = false;

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

function drawSlice(deg, color) {
  ctx1.moveTo(center, center);
  ctx1.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
  ctx1.lineTo(center, center);
  ctx1.closePath();
}

function drawText(deg, text) {
  // this should probably be rewritten
  ctx1.save();
  ctx1.translate(center, center);
  ctx1.rotate(deg2rad(deg));
  ctx1.textAlign = "right";
  ctx1.fillStyle = "#fff";
  ctx1.font = 'bold 30px sans-serif';
  ctx1.fillText(text, 130, 10);
  ctx1.restore();
}

function drawOnHiddenCanvas(index) {

  // we rotate the whole context
  ctx1.translate(canvas.width / 2, canvas.height / 2);
  ctx1.rotate(deg2rad(deg));
  ctx1.translate(-canvas.width / 2, -canvas.height / 2);
  // so even our image is rotated
  ctx1.drawImage(imgs[index], 0, 0);

  // new drawn pixels will act as an mask (previous drawn pixels will remain)
  ctx1.globalCompositeOperation = 'destination-atop';

  ctx1.beginPath();
  // draw one on 2 slices
  for (var i = index; i < slices; i += 2) {
    drawSlice((sliceDeg * i), color[i], ctx);
  }
  ctx1.fill(); // fill only after all your shapes are done

  ctx1.globalCompositeOperation = 'source-over';
  for (var i = index; i < slices; i += 2) {
    drawText((sliceDeg * i) + sliceDeg / 2, label[i]);
  }
  // reset the normal matrix
  ctx1.setTransform(1, 0, 0, 1, 0, 0);
  // draw this state on the main canvas
  ctx.drawImage(ctx1.canvas, 0, 0);

}

function drawImg() {

  ctx.clearRect(0, 0, width, width);

  drawOnHiddenCanvas(0);

  drawOnHiddenCanvas(1);

}



document.getElementById("spin").addEventListener("mousedown", function() {
  isStopped = true;
}, false);


document.getElementById("play").addEventListener("mousedown", function() {
  (function anim() {
    deg += speed;
    deg %= 360;

    // Increment speed
    if (!isStopped && speed < 3) {
      speed = speed + 1 * 8;
    }
    // Decrement Speed
    if (isStopped) {
      if (!lock) {
        lock = true;
        slowDownRand = rand(0.994, 0.998);
      }
      speed = speed > 0.2 ? speed *= slowDownRand : 0;
    }
    // Stopped!
    if (lock && !speed) {
      var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index
      ai = (slices + ai) % slices; // Fix negative index
      return alert("You got:\n" + label[ai]); // Get Array Item from end Degree
    }

    drawImg();
    window.requestAnimationFrame(anim);
  }());
}, false);

#wheel{
  display:inline-block;
  position:relative;
  overflow:hidden;
}
#wheel:after{
  content:"";
  background:red;
  border:2px solid white;
  position:absolute;
  top:-7px;
  left:50%;
  width:10px;
  height:10px;
  margin-left:-7px;
  transform: rotate(45deg)
}

<div id="wheel">
    <canvas id="canvas" width="300" height="300"></canvas>
 </div>
 <button id="spin">Stop!</button>
 <button id="play">play!</button>