Question

我正在尝试使用精灵表进行动画制作并在我的网站中使用它，但是我知道动画并且我在修复它时遇到了一些问题，当我使用它时，我的网页上没有显示任何内容。我正在使用一个名为Speech.png的精灵表，它是18176 x 256，每帧是256x256。到目前为止，这是我的代码。

<script language="javascript">
    // screen size variables
    var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight;        

    var canvas = document.createElement('canvas');
    var c = canvas.getContext('2d');

    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;

    var xpos=0, 
        ypos=0, 
        index=0, 
        numFrames = 70, 
        frameSize= 255;

    // Add our drawing canvas
    document.body.appendChild(canvas); 

    //load the image
    image = new Image();
    image.src = "Speech.png";

    image.onload = function() {
        //we're ready for the loop
        setInterval(loop, 1000 / 30);
    }

    function loop() {
        //clear the canvas!
        c.clearRect(0,0, SCREEN_HEIGHT,SCREEN_WIDTH);

        /*our big long list of arguments below equates to: 
            1: our image source
            2 - 5: the rectangle in the source image of what we want to draw
            6 - 9: the  rectangle of our canvas that we are drawing into

                the area of the source image we are drawing from will change each time loop() is called.
                the rectangle of our canvas that we are drawing into however, will not. 
                tricky!
        */
        c.drawImage(image,xpos,ypos,frameSize,frameSize,0,0,frameSize, frameSize);

        //each time around we add the frame size to our xpos, moving along the source image
        xpos += frameSize;
        //increase the index so we know which frame of our animation we are currently on
        index += 1;

        //if our index is higher than our total number of frames, we're at the end and better start over
        if (index >= numFrames) {
            xpos = 0;
            ypos = 0;
            index = 0;    
        //if we've gotten to the limit of our source image's width, we need to move down one row of frames                
        } else if (xpos + frameSize > image.width){
            xpos =0;
            ypos += frameSize;
        }      
    }
</script>

我的javascript动画有问题

0 个答案: