Проблемы с заданием круга в Canvas - PullRequest
Новая
       6

Проблемы с заданием круга в Canvas

0 голосов
/ 02 июля 2018

Мне было дано следующее задание, но я получаю сообщения об ошибках, которые можно увидеть при запуске фрагмента кода. Мне нужна помощь, чтобы понять, что именно я делаю неправильно.

По сути, мне нужно нарисовать круг, сделать так, чтобы он двигался и менял направление / цвет при прикосновении к стенам экрана.

Задача: создать класс Circle со следующими свойствами:

  • x - начальное значение координаты x
  • y - начальное значение координаты y
  • радиус - значения ширины и высоты
  • цвет - цвет заливки. Опишите методы:
  • draw () - помечает на экране элемент, который описывается заданными свойствами
  • setColor (newColor) - изменяет цвет заливки на новыйColor
  • move ({x = 0, y = 0}) - перемещает захваченный объект на вектор (x, y) - каждый период времени (например, 100 мс) изменяется (добавляет \ вычитает) до значений х и у соответственно. Когда круг сталкивается с любым по краю экрана необходимо реализовать его зеркальное отражение (изменить значение соответствующей координаты вектора на напротив значения знака, и вызовите этот метод с новым вектор) и генерировать событие столкновения, столкновение, которое фиксируется на уровне документа. Повесить на это событие обработчик, который изменит цвет заливки круга в другое (случайное) значение. Движение происходит до тех пор, пока не будет вызван метод stop.
  • stop () - останавливает круговое движение

Если была нажата кнопка Escape на клавиатуре, движение должно остановиться.

Я создал холст и установил перемещение рамки. Я нарисовал круг и попытался переместить его с помощью setInterval (), но похоже, что я теряю контекст. 

let c = document.getElementById("mycanvas");
let ctx = c.getContext("2d");

let xinc = 1;
let yinc = 1;

class Circle {
  constructor(xpos, ypos, radius, color) {
    this.xpos = xpos;
    this.ypos = ypos;
    this.radius = radius;
    this.color = color;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.xpos, this.ypos, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = "red";
    ctx.fill();
  }

  move(xpos, ypos) {
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.beginPath();
    this.draw();

    xpos += xinc;
    ypos += yinc;
    console.log(xpos, ypos);
    if ((this.xpos > c.width - this.radius) || (this.xpos < 0 + this.radius)) {
      xinc = -xinc;
    }
    if ((this.ypos > c.height - this.radius) || (this.ypos < 0 + this.radius)) {
      yinc = -yinc;
    }
    setInterval(this.move, 10);
    //this.draw();
  }

}

let circle = new Circle(200, 300, 50, "red");
circle.draw();
circle.move(200, 300);
<canvas id="mycanvas" width="1335" height="650" style="border: 1px solid"> </canvas>

Я только начинаю изучать события и DOM, пожалуйста, помогите мне правильно выполнить эту задачу

1 Ответ

0 голосов
/ 02 июля 2018

Вы передаете this.move в setInterval без контекста - просто функция, без this для вызова. Вы можете передать this.move.bind(this), чтобы создать bound функцию. Вы также можете сделать это один раз в конструкторе: this.move = this.move.bind(this).

Кроме того, вызов beginPath в move кажется ненужным.

...