Генерация колеса - холст

Question

Итак, я бы хотел создать вращающееся колесо с канвой и JS.У моего колеса должно быть 10 сегментов, которые я сохранил как файл .png.

Я хочу нарисовать 10 сегментов в цикле for, чтобы получить «полный круг».

Это код, который у меня есть до сих пор.К сожалению, «колесо» выглядит довольно разрушенным - я не могу найти свою ошибку.

const segmentCount = 10;

let initializeWheel = function() {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  let size = $(window).width() * 0.9;
  canvas.width = canvas.height = size;
  ctx.fillStyle = "red"
  ctx.fillRect(0, 0, size, size)
  for (let segmentIndex = 0; segmentIndex < segmentCount; segmentIndex++) {
    let image = new Image()
    image.onload = function() {
      let h = ((size / 2) / image.width) * image.height,
        w = size / 2;
      let x = size / 4,
        y = h;
      let degrees = segmentIndex * (360 / segmentCount)
      ctx.save();
      ctx.translate(x + w / 2, y + h / 2);
      ctx.rotate(degrees * Math.PI / 180.0);
      ctx.translate(-x - w / 2, -y - h / 2);
      ctx.drawImage(image, x, y, w, h);
      ctx.restore();
    };
    image.src = "https://i.stack.imgur.com/5PqtU.png"
  }
  $(canvas).appendTo(document.body)
}

initializeWheel()

canvas {
  position: "absolute";
  left: 0;
  right: 0;
  margin: "auto";
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Вот как бы я это сделал.Нет необходимости в изображениях, но если вы хотите, вы можете.

Я рисую первый сегмент, начиная с начала координат.Затем я вращаю сегмент.Также я перемещаю контекст в центре холста.Надеюсь, это поможет.

const segmentCount = 10;

let initializeWheel = function() {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  let size = $(window).width() * 0.9;
  canvas.width = canvas.height = size;
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, size, size);
  let r = 200;// the radius of the wheel
  let degrees = 2*Math.PI / segmentCount;
  function drawSegment(){
    ctx.fillStyle = "black";
    ctx.strokeStyle = "white";
    ctx.moveTo(0,0);
    ctx.lineTo(r,0);
    ctx.arc(0,0,r,0,degrees);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
  
  ctx.translate(size/2,size/2); // translate the context in the center.
  for (let segmentIndex = 0; segmentIndex < segmentCount; segmentIndex++) {
  drawSegment()
  ctx.rotate(degrees);
  }
  $(canvas).appendTo(document.body)
}

initializeWheel()

canvas {
  position: "absolute";
  left: 0;
  right: 0;
  margin: "auto";
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

ОБНОВЛЕНИЕ

ОП комментирует, что им необходимо использовать изображение.Далее я использую ту же логику, что и выше, но на этот раз я использую изображение.Мне пришлось уменьшить контекст, так как изображение было слишком большим.

const segmentCount = 10;

let initializeWheel = function() {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  let size = $(window).width() * 0.9;
  canvas.width = canvas.height = size;
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, size, size);
  //let r = 200;
  let degrees = 2*Math.PI / segmentCount;
  function drawSegment(){
    ctx.fillStyle = "black";
    ctx.strokeStyle = "white";
    ctx.moveTo(0,0);
    ctx.lineTo(r,0);
    ctx.arc(0,0,r,0,degrees);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
  
  ctx.translate(size/2,size/2);
  ctx.scale(.7,.7);// the image is too big. I have to scale down the image.
  let image = new Image();
  image.src = "https://i.stack.imgur.com/5PqtU.png"
  image.onload = function() {
  for (let segmentIndex = 0; segmentIndex < segmentCount; segmentIndex++) {
  ctx.drawImage(image, 0, -image.height, image.width, image.height);
  //drawSegment()
  ctx.rotate(degrees);
  }
  }
  $(canvas).appendTo(document.body)
}

initializeWheel()

canvas {
  position: "absolute";
  left: 0;
  right: 0;
  margin: "auto";
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>