在 HTML5 Canvas 中旋转对象答案

【问题标题】：Rotating Objects in HTML5 Canvas在 HTML5 Canvas 中旋转对象
【发布时间】：2019-04-06 01:24:37
【问题描述】：

对 Canvas 非常陌生。我创建了一个对象“Triangle”，并想出了如何实例化它并让它沿 x 和 y 轴移动。我什至想出了如何添加交互性（鼠标悬停时，对象改变方向）。让我感动的是旋转。我已经尝试了一百万种方法，但就是不明白该怎么做。我设法让整个对象组看似在点 0、0 处旋转。我希望每个对象都在自己的轴上旋转。任何帮助，将不胜感激！

var canvas = document.querySelector('canvas');

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

var c = canvas.getContext('2d');

img = new Image();
var randomNumber = getRandomInt(2);
var imgArray = ["https://i.imgur.com/efLA0Or.jpg?1", "https://i.imgur.com/efLA0Or.jpg?1"];
img.src = imgArray[randomNumber];


function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}


var mouse = {
  x: undefined,
  y: undefined
}

window.addEventListener('mousemove',
function(event) {
mouse.x = event.x;
mouse.y = event.y;
})

function Circle(x, y, dx, dy, radius, rotation) {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;

  this.draw = function() {

    c.drawImage(img, this.x, this.y, 100, 100);
  }

  this.update = function() {

    c.rotate(rotation);

    if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
      this.dx = -this.dx;
    }

    if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
      this.dy = -this.dy;
    }

    this.y += this.dy;

    //interactivity
      if (mouse.x - this.x < 100 && mouse.x - this.x > -100
          && mouse.y - this.y < 100 && mouse.y - this.y > -100
      ) {
        this.dx = -dx * 2;
        this.dy = -dy * 2;
    }
    this.draw();
  }

}


var circleArray = [];

for (var i = 0; i < 100; i++) {
  var x = Math.random() * (innerWidth - radius * 2) + radius;
  var y = Math.random() * (innerHeight - radius * 2) + radius;
  var dx = (Math.random() - 0.5) * 1;
  var dy = (Math.random() - 0.5) * 1;
  var radius=30;
  var rotation = Math.PI/180;


  circleArray.push(new Circle(x, y, dx, dy, radius, rotation));


}



  function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, innerWidth, innerHeight);
    for (var i = 0; i < circleArray.length; i++){
      circleArray[i].update();
    }


  }

  animate();

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="canvas.css">
<script src="canvas.js"></script>
</head>

<body>
  <div id="container">
<canvas></canvas>
<script src="canvas.js"></script>
</div>
</body>
</html>

【问题讨论】：

您的代码没有任何对象“三角形”...
HTML5 Canvas Rotate Image的可能重复

标签： html animation canvas rotation

【解决方案1】：

你有一些错误。这就是它不起作用的原因。您有一些未声明的变量。另外：我会以不同的方式进行鼠标检测。

我已将旋转放入 Circle 的绘制方法中。由于该方法称为 Circle，因此我已将您的图像剪辑成一个圆圈。如果您不想要这个，请移除圆弧和夹子部分。

var canvas = document.querySelector('canvas');

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

var c = canvas.getContext('2d');

var radius=30;
//var rotation = Math.PI/180;

img = new Image();
var randomNumber = getRandomInt(2);
var imgArray = ["https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg"];
img.src = imgArray[randomNumber];


function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}


var mouse = {
  x: undefined,
  y: undefined
}

window.addEventListener('mousemove',
function(event) {
mouse.x = event.x;
mouse.y = event.y;
})

function Circle(x, y, dx, dy, radius) {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;
  this.rotation = Math.PI*Math.random();

  this.draw = function() {
    c.save();
    c.translate(this.x,this.y);
    c.rotate(this.rotation);
    c.beginPath();
    c.arc(0,0,this.radius,0,2*Math.PI);
    c.clip();
    c.drawImage(img, -this.radius, -this.radius, this.radius*2, this.radius*2);
   
    c.restore();
  }

  this.update = function() {

    if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
      this.dx = -this.dx;
    }

    if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
      this.dy = -this.dy;
    }
    this.x += this.dx;
    this.y += this.dy;

    //interactivity
      if (mouse.x - this.x < 100 && mouse.x - this.x > -100
          && mouse.y - this.y < 100 && mouse.y - this.y > -100
      ) {
        this.dx = -dx * 2;
        this.dy = -dy * 2;
    }
    this.draw();
  }

}


var circleArray = [];

for (var i = 0; i < 100; i++) {
  var x = Math.random() * (innerWidth - radius * 2) + radius;
  var y = Math.random() * (innerHeight - radius * 2) + radius;
  var dx = (Math.random() - 0.5) * 1;
  var dy = (Math.random() - 0.5) * 1;
 


  circleArray.push(new Circle(x, y, dx, dy, radius));


}



  function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, innerWidth, innerHeight);
    for (var i = 0; i < circleArray.length; i++){
      circleArray[i].update();
    }

    
  }

  animate();

<div id="container">
<canvas></canvas>
</div>

【讨论】：

非常感谢您的彻底回复，爱 puppos！一件事：旋转是静态的，而不是动画的。我将如何制作动画？
在this.update 中您可以添加this.rotation += .01（例如）
再次感谢@enxaneta，精彩而简单。我对 javascript 很陌生，这些东西对你来说可能很明显，但对外行来说却不是。既然你这么有帮助，我想再向你提出一个问题：现在 Circle 数组产生了许多相同类型的小狗。有没有一种简单的方法可以让单个数组产生两种类型的随机混合？
在您的Circle 函数中添加this.img = new Image(); this.img.src = imgArray[getRandomInt(2)];，然后当您在this.draw 函数中绘制图像时将c.drawImage(img . . . ., 更改为c.drawImage(this.img,. . . .
我非常接近于自己获得这个解决方案，所以也许我实际上正在学习一些东西！不幸的是，它正在绘制一个空白画布。但是，没有抛出任何错误，所以我不确定问题是什么......