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

I have a list of picture variables : skeletonIdle ; I wanna have a class that draws each one after the other so i have an animation

我有一个图片变量列表：skeletonIdle;我想要一个能够逐个绘制每个人的课程，所以我有一个动画

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

        ];

I'm trying to iterate through each one and draw it so that i will have an animation

我试图遍历每一个并绘制它，以便我将有一个动画

        this.skelframe += 0.1 ; 



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

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

It seems that i cant get drawImage to work in a class is it possible to have drawImage in a class . If so how do i do this Here is me calling the method .

似乎我不能让drawImage在类中工作是否可以在类中使用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();
}

1 个解决方案

#1

It seems that I was needing to use RequestAnimationFrame() as its a better alternative for repainting . And the setInterval() function can cause browsers to bug out.

似乎我需要使用RequestAnimationFrame（）作为重绘的更好选择。并且setInterval（）函数可能导致浏览器出错。