sin 和 cos Canvas Js 绕中心增加旋转角度

Question

大家好，我正在 canvas 中用 sin 和 cos 做一些小练习。我现在可以使一个点围绕另一个点旋转，并在它工作的动画函数中增加角度，如下面的代码所示。我的目的是在 Class viefinder

的更新函数中增加角度

const canvas= document.getElementById('canvas');
const c= canvas.getContext("2d");

canvas.width= window.innerWidth;
canvas.height= window.innerHeight;

let angle=0;
const r=200;



/* -------------------------------------------------------------------------- */
/*                                 View Finder                                */
/* -------------------------------------------------------------------------- */

class ViewFinder {
  constructor(x,y,radius,color){
      this.x=x;
      this.y=y;
      this.radius=radius;
      this.color=color
      this.r= r;
      this.angle=angle;
      this.dx = this.r * Math.cos(this.angle);
      this.dy= this.r * Math.sin (this.angle);

  }
  draw(){
        //point 1
        c.beginPath()
        c.arc(this.x,this.y,this.radius, 0, Math.PI *2,false )
        c.fillStyle=this.color;
        c.fill();
        //point 2
        c.beginPath();
        c.arc(this.x + this.dx, this.y + this.dy,this.radius,0, Math.PI * 2, false );
        c.fillStyle=this.color;
        c.fill();
  }
  update(){
      this.draw();
  }

}


/* -------------------------------------------------------------------------- */
/*                                   Animate                                  */
/* -------------------------------------------------------------------------- */

let animationId;



function animate(){
   animationId= requestAnimationFrame(animate);
   c.fillStyle='rgba(0, 0, 0, 0.5)';
   c.fillRect(0,0,canvas.width,canvas.height);
   // calculate velocity
   viewFinder = new ViewFinder (canvas.width/2, canvas.height/2, 40, 'white');
   angle +=0.1/2;
   viewFinder.update();
}

animate();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="height: 100vh;">
    <canvas id="canvas"></canvas>
    <script src="main.js"></script>
</body>
</html>

因此，如果我也这样做，但我在更新函数中增加了角度，则没有任何变化。只是试着理解为什么非常感谢您的回答

const canvas= document.getElementById('canvas');
const c= canvas.getContext("2d");

canvas.width= window.innerWidth;
canvas.height= window.innerHeight;

let angle=0;
const r=200;



/* -------------------------------------------------------------------------- */
/*                                 View Finder                                */
/* -------------------------------------------------------------------------- */

class ViewFinder {
  constructor(x,y,radius,color){
      this.x=x;
      this.y=y;
      this.radius=radius;
      this.color=color
      this.r= r;
      this.angle=angle;
      this.dx = this.r * Math.cos(this.angle);
      this.dy= this.r * Math.sin (this.angle);

  }
  draw(){
        //point 1
        c.beginPath()
        c.arc(this.x,this.y,this.radius, 0, Math.PI *2,false )
        c.fillStyle=this.color;
        c.fill();
        //point 2
        c.beginPath();
        c.arc(this.x + this.dx, this.y + this.dy,this.radius,0, Math.PI * 2, false );
        c.fillStyle=this.color;
        c.fill();
  }
  update(){
      this.draw();
      this.angle +=0.1;
  }

}


/* -------------------------------------------------------------------------- */
/*                                   Animate                                  */
/* -------------------------------------------------------------------------- */

let animationId;



function animate(){
   animationId= requestAnimationFrame(animate);
   c.fillStyle='rgba(0, 0, 0, 0.5)';
   c.fillRect(0,0,canvas.width,canvas.height);
   // calculate velocity
   viewFinder = new ViewFinder (canvas.width/2, canvas.height/2, 40, 'white');
   viewFinder.update();
}




animate();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="height: 100vh;">
    <canvas id="canvas"></canvas>
    <script src="main.js"></script>
</body>
</html>

Answer 1

问题是：在第一个示例中，您正在更新全局变量 angle，但在第二个示例中您正在更新 this.angle，在第一种情况下，您每帧都在重新创建对象 viewFinder，并且由于 angle 的值已更改，所以 dx 和 dy 的值都会重新计算对于新对象。

但是，在第二种情况下，您还重新创建了对象 viewFinder，它使用全局变量 angle 来设置新的角度以及 dx 和 dy 但是你不再更新角度，这使得元素看起来是静态的，要解决此问题：

不要为每一帧重新创建对象，创建一次并为每一帧更新它。
在更新this.angle
的值后更新dx和dy的值

您的代码将类似于：

const canvas = document.getElementById('canvas')
const c = canvas.getContext('2d')

canvas.width = window.innerWidth
canvas.height = window.innerHeight

let angle = 0
const r = 200

/* -------------------------------------------------------------------------- */
/*                                 View Finder                                */
/* -------------------------------------------------------------------------- */

class ViewFinder {
  constructor(x, y, radius, color) {
    this.x = x
    this.y = y
    this.radius = radius
    this.color = color
    this.r = r
    this.angle = angle
    this.dx = this.r * Math.cos(this.angle)
    this.dy = this.r * Math.sin(this.angle)
  }
  draw() {
    //point 1
    c.beginPath()
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    c.fillStyle = this.color
    c.fill()
    //point 2
    c.beginPath()
    c.arc(
      this.x + this.dx,
      this.y + this.dy,
      this.radius,
      0,
      Math.PI * 2,
      false
    )
    c.fillStyle = this.color
    c.fill()
  }
  update() {
    this.draw()
    this.angle += 0.1
    this.dx = this.r * Math.cos(this.angle)
    this.dy = this.r * Math.sin(this.angle)
  }
}

/* -------------------------------------------------------------------------- */
/*                                   Animate                                  */
/* -------------------------------------------------------------------------- */

let animationId

let viewFinder = new ViewFinder(canvas.width / 2, canvas.height / 2, 40, 'white')
function animate() {
  animationId = requestAnimationFrame(animate)
  c.fillStyle = 'rgba(0, 0, 0, 0.5)'
  c.fillRect(0, 0, canvas.width, canvas.height)
  // calculate velocity

  viewFinder.update()
}

animate()

sin 和 cos Canvas Js 绕中心增加旋转角度

Increasing angle of rotation around center with sin and cos Canvas Js

javascript

canvas

trigonometry