使用Canvas将图像添加到滚轮

Question

我是画布的新手，我尝试创建一个轮子，这里是我的代码：

drawWheel = () =>{
        const length = 4;
        const sliceDeg = 360/length;
        var deg = 270;

        var canvas = this.refs.canvas;
        if(canvas.getContext){
            const ctx = canvas.getContext('2d');
            for(let i = 0;i<length;i++){
                ctx.beginPath();
                ctx.moveTo(center, center);
                ctx.arc(center,center,radius, this.deg2rad(deg) ,this.deg2rad(deg + sliceDeg));
                ctx.lineTo(center,center);
                ctx.stroke();

                ctx.save();
                ctx.translate(center, center);
                ctx.rotate(this.deg2rad(deg+sliceDeg/2));
                ctx.textAlign = "right";
                ctx.fillStyle = "red";
                ctx.font = 'bold 5vw sans-serif';
                ctx.fillText(i+1, radius/1.5,radius/11);
                ctx.restore();
                deg += sliceDeg;  
            }
        }
    }

这是我的结果：

如何为每个切片填充图像并调整它们以适合

Answer 1

查看globalCompositeOperation和以下示例：

var size = 400; // I use a simple size because i don't have any images. Your code should probably be a little smarter.
var myImages = []; //List of images
/* GENEREATE IMAGES START */
//I generate some images using canvas here, but you should probably use <IMG> elements and img.naturalWidth/img.naturalHeight
["red", "blue", "green", "yellow"].forEach((color) => {
  var canvas = document.createElement("canvas");
  canvas.width = canvas.height = size / 2;
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, size / 2, size / 2);
  myImages.push(canvas);
});
/* GENEREATE IMAGES STOP */
//Main canvas to draw upon
var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = canvas.height = size;
var ctx = canvas.getContext("2d");
//Draw base shape.
//Color doesn't matter, since we'll draw on top of it later
ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
ctx.fill();
//Set canvas to reuse transparency of existing pixels when drawing.
ctx.globalCompositeOperation = "source-atop";
//Loop through images and draw on canvas.
for (let x = 0; x < 2; x++) {
  for (let y = 0; y < 2; y++) {
    ctx.drawImage(myImages[x * 2 + y], x * size / 2, y * size / 2);
  }
}
//Reset canvas draw mode.
//Technically not necessary, but a good practice to leave things the way you found them.
ctx.globalCompositeOperation = "source-over";

编辑1

或者，您可以使用clipping来获取适合的图像部分：

编辑2

以下是使用裁剪和处理角度的示例：

function drawImagesOnCircleSlices(p) {
  var canvas = document.createElement("canvas");
  canvas.width = canvas.height = p.radius * 2;
  var ctx = canvas.getContext("2d");
  var step = (Math.PI * 2) / p.images.length;
  var cos = Math.cos(step);
  var width = Math.ceil(Math.abs((Math.cos(0) * p.radius) - (cos * p.radius)));
  var sin = Math.sin(step);
  ctx.save();
  ctx.translate(p.radius, p.radius);
  for (var i = 0; i < p.images.length; i++) {
    var image = p.images[i];
    ctx.rotate(step);
    ctx.save();
    ctx.beginPath();
    //Base
    ctx.arc(0, 0, 0, 0, 0);
    //Top
    ctx.arc(0, 0, p.radius, 0, 0);
    //Bottom
    ctx.arc(0, 0, p.radius, 0, step);
    ctx.closePath();
    ctx.stroke();
    ctx.clip();
    //document.body.appendChild(image)
    ctx.drawImage(image, Math.min(cos * p.radius, 0), Math.min(sin * p.radius, 0));
    ctx.restore();
  }
  ctx.restore();
  return canvas;
}
//TEST
//Asynchronous image loading with callback to draw
function loadImages(callback) {
  var images = [];
  var imageSize = 200;
  var extra = 200;
  var loaded = 0;
  while (images.length < 7) {
    var canvas = document.createElement("canvas");
    canvas.height = Math.floor(Math.random() * imageSize) + extra;
    canvas.width = Math.floor(Math.random() * imageSize) + extra;
    var ctx = canvas.getContext("2d");
    for (var i = 0; i < 1000; i++) {
      ctx.fillStyle = "rgba(" + [Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), 0.5].join(",") + ")";
      ctx.fillRect(Math.random() * imageSize, Math.random() * imageSize, Math.random() * imageSize, Math.random() * imageSize);
    }
    var img = document.createElement("img");
    images.push(img);
    img.onload = function() {
      loaded++;
      if (loaded === images.length) {
        callback(images);
      }
    };
    img.src = canvas.toDataURL();
  }
}
//Begin loading
loadImages(function(images) {
  document.body.appendChild(drawImagesOnCircleSlices({
    images: images,
    radius: 200
  }));
});