围绕原点旋转多个对象（JavaScript Canvas）

问题描述 投票：0回答：1

我目前正在构建一个画布游戏。我目前在设置玩家时遇到问题。我想做的基本上是围绕原点旋转它们。 I can place players, but i am not able to rotate them 我当前的代码是

addEventListener("DOMContentLoaded",()=>{
    const canvas = document.getElementById("canvas")
    var h = window.innerHeight
    var w = window.innerWidth
    var playerCircleSize = 40
    canvas.height = h
    canvas.width = w
    console.log(h,w)
    function rad(degree){
        return degree * (Math.PI / 180)
    }
    function render(){
        const ctx = canvas.getContext("2d");
        ctx.fillStyle = "#6e955e";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        function player(position){
            function arc(tr1,tr2,size,fillst){
                this.draw = function(){
                    ctx.beginPath();
                    ctx.save()
                    ctx.translate(tr1,tr2)
                    ctx.rotate(rad(position.rot))
                    ctx.arc(0,0,size, 0, 2 * Math.PI);
                    ctx.fillStyle=fillst
                    ctx.fill()
                    ctx.restore()
                }
            }
            var body = new arc(position.x, position.y,playerCircleSize,"#ffc266")
            var hand1 = new arc(position.x-(playerCircleSize/1.5), position.y-(playerCircleSize/1.4),playerCircleSize/3,"#ffb84d")
            var hand2 = new arc(position.x-(playerCircleSize/-1.5), position.y-(playerCircleSize/1.4),playerCircleSize/3,"#ffb84d")

            hand1.draw()
            hand2.draw()
            body.draw()

        }
        player({
            x: w/2 - (playerCircleSize/2),
            y: h/2 - (playerCircleSize/2),
            rot: 90
        })
        player({
            x: 150,
            y: 300,
            rot: 45
        })
    }
    render()
    window.addEventListener("resize", ()=>{
        h = window.innerHeight
        w = window.innerWidth
        canvas.height = h
        canvas.width = w
        console.log(h,w)
        render()
    });
})

我尝试单独旋转每个元素，但这不起作用。我期待结果看起来像this

javascript canvas
1个回答
0
投票

您当前将旋转应用于玩家身体的不同部分并分别移动它们，即每个圆圈都围绕其中心旋转。这使得整个播放器的旋转变得不可能。

要解决此问题，您需要更改使用坐标的方式。 您的播放器必须按照位置 [0, 0] 进行渲染，然后根据需要进行平移和旋转。

这是工作版本。请注意我如何更改应用平移和旋转的方式。

顺便说一句，我强烈建议将 

arc
移出 
player
并将 
player
移出 
render
。这就像每当您运行 
render
时，
player
和 
arc
对象都会被重新创建。 JS 可能足够聪明，可以一次性编译这些对象，但为了改进代码结构，我不建议将这些对象放在一起。

请告诉我这是否有帮助。

addEventListener("DOMContentLoaded", () => {
  const canvas = document.getElementById("canvas")
  var h = window.innerHeight
  var w = window.innerWidth
  var playerCircleSize = 40
  canvas.height = h
  canvas.width = w
  console.log(h, w)

  function rad(degree) {
    return degree * (Math.PI / 180)
  }

  function render() {
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "#6e955e";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    function player(position) {
      function arc(tr1, tr2, size, fillst) {
        this.draw = function() {
          ctx.save()
          ctx.beginPath();
          ctx.arc(tr1, tr2, size, 0, 2 * Math.PI);
          ctx.fillStyle = fillst
          ctx.fill()
          ctx.restore()
        }
      }
      var body = new arc(0, 0, playerCircleSize, "#ffc266")
      var hand1 = new arc((playerCircleSize / 1.5), -(playerCircleSize / 1.4), playerCircleSize / 3, "#ffb84d")
      var hand2 = new arc(-(playerCircleSize / 1.5), -(playerCircleSize / 1.4), playerCircleSize / 3, "#ffb84d")

      ctx.save()
      ctx.translate(position.x, position.y)
      ctx.rotate(rad(position.rot))

      hand1.draw()
      hand2.draw()
      body.draw()
      ctx.restore()

    }
    player({
      x: w / 2 - (playerCircleSize / 2),
      y: h / 2 - (playerCircleSize / 2),
      rot: 90
    })
    player({
      x: 150,
      y: 300,
      rot: 45
    })
  }
  render()
  window.addEventListener("resize", () => {
    h = window.innerHeight
    w = window.innerWidth
    canvas.height = h
    canvas.width = w
    console.log(h, w)
    render()
  });
})
<html>

<body>

  <canvas id="canvas"></canvas>

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.