Вращение объектов в холсте HTML5 - PullRequest
Новая
       6

Вращение объектов в холсте HTML5

0 голосов
/ 01 ноября 2018

Очень новый для Canvas. Я создал объект «Треугольник» и выяснил, как создать его экземпляр и сделать так, чтобы он двигался вдоль осей 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>

1 Ответ

0 голосов
/ 02 ноября 2018

У вас были некоторые ошибки. Вот почему это не сработало. У вас было несколько необъявленных переменных. Также: я бы сделал обнаружение мыши по-другому.

Я поместил вращение в метод рисования Круга. Так как метод называется 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...