javascript - 如何用不同的图像填充 Canvas 圆弧？

Question

我正在使用 html5 canvas 创建财富之轮。它与填充样式颜色配合得很好。我想要随机切片填充样式图案中的两(2)个不同图像。我如何实现这一目标。

这是我的 JS

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 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) {
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.moveTo(center, center);
  ctx.arc(center, center, width/2, deg2rad(deg), deg2rad(deg+sliceDeg));
  ctx.lineTo(center, center);
  ctx.fill();
}

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

function drawImg() {
  ctx.clearRect(0, 0, width, width);
  for(var i=0; i<slices; i++){
    drawSlice(deg, color[i]);
    drawText(deg+sliceDeg/2, label[i]);
    deg += sliceDeg;
  }
}



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

drawImg();

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

这是我的 html

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

请帮帮我。 Working fiddle is here

Answer 1

您可以使用屏幕外 Canvas

• 以当前旋转绘制第一张图像，
• 用一半切片(1/2)对其应用合成
• 在主 Canvas 上绘制这个离屏 Canvas ，
• 对第二张图像重复相同的操作

这是基于您的代码的丑陋的概念证明，它真的很难看，所以请重写它。

// 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>