Question

我想使用画布技术创建一个圆，但是要做到这一点，我想利用ES6的功能，并尝试制作一个引擎，就像用类绘制和更新东西一样。

我很难画圆圈或不知道如何使用Classes。我知道如何在函数式编程中做到这一点，但是在这里我不确定应该如何实现。

我已经创建了一个蓝图，但是我认为它远没有奏效。

使用“画布类”和“ Ufo（圆）”，如何在屏幕上的任何地方显示圆。

这是codepen：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>

希望您会发现它有用。

如何使用JavaScript ES6创建canvas类？

1 个答案: