Question

我有一个图片变量列表：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

        ];

我正在尝试遍历每一个并绘制它所以我将有一个动画

        this.skelframe += 0.1 ; 



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

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

似乎我无法让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();
}

Answer 1

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

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

1 个答案: