Javascript 如何将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);

---

我做错了什么吗？

您的问题是在

requestAnimationFrame（）

方法中反复调用

animate（）

。相反，当requestAnimationFrame（）决定这样做时，您需要让JS为您调用函数

animate

这意味着您需要将

animate

函数传递到

requestAnimationFrame

，而不是实际的函数调用（因为调用函数时，实际上是传递其返回值）：

由于JS将处理

animate

方法的调用，因此

animate（）

内部的

this

（调用时）将不是您的

Canvas

对象，而是

窗口。要制作
此
请参考您的
画布
对象，您需要将（此）

绑定到

动画

功能。上述操作相当于使用箭头功能：

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

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

另外，

ctx

是画布实例的一部分。每个画布对象都将具有构造函数中定义的

.ctx

属性。因此，无需将其作为参数传递给

动画

或

显示

，因为您可以使用

this.ctx

访问它

请参见下面的示例（注意，该图像是临时图像）：

类画布{
构造函数（canvasId='canvas'，dimension='2d'，canvasWidth=document.body.clientWidth，canvasHeight=window.innerHeight，canvasDisplay='block'，canvasOverflow='hidden'）{
//初始化画布和上下文变量
this.can=document.getElementById（canvasId）；
this.ctx=this.can.getContext（维度）；
//设置画布属性
this.can.width=画布宽度；
this.can.height=画布高度；
this.can.style.display=画布显示；
this.can.style.overflow=canvasOverflow；
此值为0.count；
}
显示（）{
var ctx=this.ctx；
var scrollSS=新图像（）；
scrollSS.src=”https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRha_-J-uQR_8pUrUQOiPYZ_JXRoqfoqDt8BO8icSfkworyz9woQQ&s”；
scrollSS.addEventListener（'load'，e=>{
ctx.drawImage（滚动条，0，0，102，345，10，0，this.can.width/10，this.can.height）；
});
}
制作动画（）{
这个.count++；
这个.display（）；
requestAnimationFrame（this.animate.bind（this））；
}
}
var canvas=newcanvas（）；
canvas.animate（）
谢谢你的帮助，尼克·帕森斯。我学到了很多。
requestAnimationFrame(() => this.animate());