Question

是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>

Answer 1

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

我已经将旋转放置在Circle的draw方法中。由于该方法称为“圆”，因此我将您的图像剪裁成一个圆。如果您不希望这样做，请移除圆弧和夹子部分。

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>

在HTML5画布中旋转对象

1 个答案: