javascript - 你如何使用 Canvas 作为一个类？

Question

我正在尝试创建一个以 Canvas 作为对象的类，以尝试了解有关类的更多信息。我编写了以下代码，但它只给出了一个空白屏幕。

    class Canvas
{
    constructor(canvasId = 'canvas', dimension = '2d', canvasWidth = document.body.clientWidth,canvasHeight = window.innerHeight,canvasDisplay = 'block',canvasOverflow = 'hidden')
    {
        // Initialize Canvas and Context variables
        this.can = document.getElementById(canvasId);
        this.ctx = this.can.getContext(dimension);
        //  Set canvas properties
        this.can.width = canvasWidth;
        this.can.height = canvasHeight;
        this.can.style.display = canvasDisplay;
        this.can.style.overflow = canvasOverflow;
        this.count = 0;
    }

    display(ctx) 
    {
        var ctx = ctx;
        var scrollSS = new Image();
        scrollSS.src = "../../../Assets/Media/Images/Scroll/ScrollSpriteSheet.png";
        ctx.drawImage(scrollSS,0,0,102,345,10,0,canvas.width / 10,canvas.height);
    }

    animate(ctx) 
    {   
        var ctx = ctx;
        console.log(this.count);
        this.count++;
        this.display(ctx)
        requestAnimationFrame(this.animate(ctx));   
    }


}

var canvas = new Canvas();
console.log(canvas.ctx);
canvas.animate(canvas.ctx);

我做错了什么吗？

Answer 1

您的问题是您在requestAnimationFrame() 方法中一次又一次地调用animate()。当 requestAnimationFrame() 决定这样做时，您需要让 JS 为您调用函数 animate。

这意味着您需要将 animate 函数传递给 requestAnimationFrame，而不是实际函数 call(因为当您调用该函数时，您'真正通过它的返回值):

requestAnimationFrame(this.animate.bind(this));

由于 JS 将处理 animate 方法的调用，因此 animate() 中的 this (调用时)将不是您的Canvas 对象，而不是 window。要使 this 引用您的 Canvas 对象，您需要 .bind(this) 到您的 animate 函数.上面相当于使用了一个箭头函数:

requestAnimationFrame(() => this.animate());

您的另一个问题是您试图在图像加载之前显示图像。您首先需要加载图像，然后显示它。如果你的图像要保持不变，我建议你在绘制之前加载它，而不是每次你想重绘时加载它(见第二个代码片段)。

此外，ctx 是 Canvas 实例的一部分。每个 Canvas 对象都有一个 .ctx 属性，因为它是在构造函数中定义的。因此，无需将它作为参数传递给 animate 或 display，因为您可以使用 this.ctx 访问它。

请参见下面的示例(注意图像是临时图像):

class Canvas {
  constructor(canvasId = 'canvas', dimension = '2d', canvasWidth = document.body.clientWidth, canvasHeight = window.innerHeight, canvasDisplay = 'block', canvasOverflow = 'hidden') {
    // Initialize Canvas and Context variables
    this.can = document.getElementById(canvasId);
    this.ctx = this.can.getContext(dimension);
    //  Set canvas properties
    this.can.width = canvasWidth;
    this.can.height = canvasHeight;
    this.can.style.display = canvasDisplay;
    this.can.style.overflow = canvasOverflow;
    this.count = 0;
  }

  display() {
    var ctx = this.ctx;
    var scrollSS = new Image();
    scrollSS.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRha_-J-uQR_8pUrUQOiPYZ_JXRoqfoqDt8BO8icSfkworyz9woQQ&s";
    scrollSS.addEventListener('load', e => {
      ctx.drawImage(scrollSS, 0, 0, 102, 345, 10, 0, this.can.width / 10, this.can.height);
    });
  }

  animate() {
    this.count++;
    this.display();
    requestAnimationFrame(this.animate.bind(this));
  }
}

var canvas = new Canvas();
canvas.animate();

<canvas id="canvas" style="border: 1px solid black"></canvas>

这是一种使用 Promises 的方法如果您只需要加载一张图片，您可能想要拍摄:

class Canvas {
  constructor(canvasId = 'canvas', dimension = '2d', canvasWidth = document.body.clientWidth, canvasHeight = window.innerHeight, canvasDisplay = 'block', canvasOverflow = 'hidden') {
    // Initialize Canvas and Context variables
    this.can = document.getElementById(canvasId);
    this.ctx = this.can.getContext(dimension);
    //  Set canvas properties
    this.can.width = canvasWidth;
    this.can.height = canvasHeight;
    this.can.style.display = canvasDisplay;
    this.can.style.overflow = canvasOverflow;
    this.count = 0;
  }

  loadImage(url) {
    var img = new Image();
    img.src = url;
    return new Promise((resolve) => {
      img.addEventListener('load', function(e) {
        resolve(this);
      });
    });
  }

  display(img) {
    var ctx = this.ctx;
    ctx.drawImage(img, 0, 0, 102, 345, 10, 0, this.can.width / 10, this.can.height);
  }

  animate(img) {
    this.count++;
    this.display(img);
    requestAnimationFrame(this.animate.bind(this, img));
  }
}

var canvas = new Canvas();
var img_url = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRha_-J-uQR_8pUrUQOiPYZ_JXRoqfoqDt8BO8icSfkworyz9woQQ&s"; 
canvas
  .loadImage(img_url)
  .then(function(image) {
    canvas.animate(image);  
  });

<canvas id="canvas" style="border: 1px solid black"></canvas>