Java 脚本如何在 class 方法中正确使用 drawimage

Question

我有一个图片变量列表：skeletonIdle；我想要一个 class 一个接一个地绘制，所以我有一个动画

class Skeleton{

    constructor(){

        this.skelframe = 0 ;

    }

    drawSkeleton(){

        this.skelIdle1 = document.getElementById("skel1");
        this.skelIdle2 = document.getElementById("skel2");
        this.skelIdle3 = document.getElementById("skel3");
        this.skelIdle4 = document.getElementById("skel4");
        this.skelIdle5 = document.getElementById("skel5");
        this.skelIdle6 = document.getElementById("skel6");
        this.skelIdle7 = document.getElementById("skel7");
        this.skelIdle8 = document.getElementById("skel8");
        this.skelIdle9 = document.getElementById("skel9");
        this.skelIdle10 = document.getElementById("skel10");

        this.skeletonIdle = [

            this.skelIdle1,
            this.skelIdle2,
            this.skelIdle3,
            this.skelIdle4,
            this.skelIdle5,
            this.skelIdle6,
            this.skelIdle7,
            this.skelIdle8,
            this.skelIdle9,
            this.skelIdle10

        ];

我正在尝试遍历每一个并绘制它这样我就会有一个动画

        this.skelframe += 0.1 ; 



        if (this.skelframe > 9 ){
            this.skelframe = 0 ;
        }

canvasContext.drawImage(this.skeletonIdle[this.skelframe],10,10,100,100);

看来我无法让 drawImage 在 class 中工作是否可以在 class 中使用 drawImage。如果是这样我该怎么做这是我调用的方法。

window.onload= function() {

    canvas = document.getElementById("Gamecanvas");
    canvasContext = canvas.getContext("2d");
    canvasContext.fillStyle = 'red' ;
    canvasContext.fillRect(0,0,canvas.width,canvas.height);
    var GlacierImage = document.getElementById("glacier");
    canvasContext.drawImage(GlacierImage,0,0,canvas.width,canvas.height);
    skeletonChar.drawSkeleton();
}

Answer 1

看来我需要使用 RequestAnimationFrame() 作为重绘的更好替代方法。 setInterval() 函数可能会导致浏览器出错。

Java 脚本如何在 class 方法中正确使用 drawimage

Java script how do i properly use drawimage in a class method

javascript

methods

scope

class

elements