生成轮子 - 画布

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 cmets。接下来我使用与上面相同的逻辑，但这次我使用的是图像。由于图像太大，我不得不缩小上下文。

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>