Как создать класс холста с помощью JavaScript ES6?

Question

Я хочу создать круг, используя технологию Canvas, но для этого я хочу использовать функции ES6 и попытаться создать такой движок, как просто рисование и обновление материала с помощью классов.

Мне трудно нарисовать круг или узнать, как использовать классы. Я знаю, как это сделать в функциональном программировании, но здесь я не уверен, как этого добиться.

Я создал какой-то проект, но я считаю, что он далек от работы.

Что я могу сделать, чтобы отобразить кружок в любом месте экрана, используя классы для холста и НЛО (кружок).

Вот кодовая ручка: https://codepen.io/Aurelian/pen/mGWVbq?editors=1010

Вот JS:

   /*
    * ------------------------------------------
    * *-----------------------------
    *  Canvas
    * *-----------------------------
    * ------------------------------------------
    */      
      // Set
      // Draw
      // Update
      // Animate
   class Canvas {
      constructor(height, width) {
         this.canvas = document.querySelector('canvas');
           this.c = canvas.getContext('2d');
           canvas.width = window.innerWidth;
           canvas.height = window.innerHeight;
      }
   }

   Canvas.prototype.draw = function() {

   }

   Canvas.prototype.animate = function() {
      requestAnimationFrame(animate);
      new Ufo()
   }




   /*
    * ------------------------------------------
    * *-----------------------------
    *  UFO
    * *-----------------------------
    * ------------------------------------------
    */
   class Ufo {
      constructor(x, y, velocity) {
         this.x = x,
         this.y = y,
         this.velocity = {
            x: 3,
            y: 3
         }
      }
   }

   Ufo.prototype.draw = function() {
      c.save()
      c.beginPath()
      c.arc(this.x, this.x, 50, 0, Math.PI * 2, false)
      c.fillStyle = red;
      c.fill()
      c.closePath()
      c.restore()
   }

   Ufo.prototype.update = function() {
      Ufo.draw() 
   }

 new Canvas(animate)

Answer 1

В вашем коде есть ошибки. Это исправленный код:

'use strict';

/* UFO*/
   class Ufo {
      constructor() {
         this.x = 77,
         this.y = 77,
         this.velocity = {
            x: 3,
            y: 3
         }
      }
      
      draw(c) {
         c.save()
         c.beginPath()
         c.arc(this.x, this.x, 50, 0, Math.PI * 2, false)
         c.fillStyle = "red";
         c.fill()
         c.closePath()
         c.restore()
      }
      
      update(c) {
         this.draw(c)
      }
   }

/* Canvas*/		

   class CanvasDisplay {
      constructor() {
         this.canvas = document.querySelector('canvas');
		   this.ctx = this.canvas.getContext('2d');
         this.stageConfig = {
		      width: window.innerWidth,
		      height: window.innerHeight
         };         
         this.canvas.width = this.stageConfig.width;
         this.canvas.height = this.stageConfig.height;
         this.Ufo = new Ufo();
      }
      
      animate() {
         this.ctx.clearRect(0, 0, this.stageConfig.width, this.stageConfig.height);
         this.Ufo.update(this.ctx)
      }
   }


let canvasDisplay = new CanvasDisplay();
canvasDisplay.animate();

<canvas></canvas>

Надеюсь, вы найдете это полезным.