如何使用 JavaScript ES6 创建画布类？

Question

I want to create a circle using canvas technology, but to do that I want to make use of ES6 features, and try to make an engine like just drawing and updating stuff with Classes.

I'm having a hard time to draw the circle or know how to go about using Classes. I know how to do it in functional programming, but here I'm not sure how that should be achieved.

I have created somewhat a blueprint, but its far from working I believe.

What can I do to display a circle anywhere on the screen, using Classes for Canvas and the Ufo(circle).

Here is the codepen: https://codepen.io/Aurelian/pen/mGWVbq?editors=1010

Here is the 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

You have some mistakes in your code. This is the corrected code:

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

I hope you'll find this useful.