生成轮子-画布

Question

好吧-我想用画布和JS生成一种纺车。我的车轮应该有10个线段，我将其保存为.png文件。

我想在for循环中绘制10个线段以获得一个“完整的圆”。

这是我到目前为止的代码。不幸的是，“方向盘”看上去很破损-我找不到我的错误。

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>

更新

OP注释他们需要使用该图像。接下来，我使用与上面相同的逻辑，但是这次我使用的是图像。由于图像太大，我不得不缩小上下文。

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>