你如何使用画布作为一个类？

Question

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

    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 ，而不是实际的函数调用（因为当您调用该函数时，您实际上是在传递其返回值）：

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

由于 JS 将处理animate方法的调用，因此animate animate() （调用时）内部的this将不是您的Canvas对象，而是window 。 要使this引用您的Canvas对象，您需要将.bind(this)到您的animate函数。 以上相当于使用箭头函数：

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

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

此外， ctx是画布实例的一部分。 每个画布对象都有一个.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>