画布精灵表错误 [英] canvas sprite sheet error

问题描述

我在canvas spritesheet动画中发现了一个可爱的代码片段。这是ts：

http：// jsfiddle。 net / m1erickson / h85Gq /

我尝试着通过编写一个接受Image对象的动画函数来美化这段代码，这样我就可以动画多个图像我的画布同时。这是我的尝试：

  $（function（）{
 var canvas = document.getElementById（canvas ）; 
 var ctx = canvas.getContext（2d）; 
 var spritePosition = 0; 
 var spriteWidth = 100; 
 var spriteHeight = 100; 
 var spriteCount = 40; 
 var spritePlayCount = 0; 
 var maxSpritePlays = 2; 
 
 var objectS = new Image（）; 
 objectS.src =sprites / first.png; 
 
 var fps = 50; 
函数animate（sprite）{
 setTimeout（function（）{
 
 if（spritePlayCount< maxSpritePlays）{
 requestAnimationFrame（animate）; 
} 
 
 //绘图代码在这里
 ctx.clearRect（0,0，canvas.width，canvas.height ）; 
 ctx.drawImage（sprite，spritePosition * spriteWidth，0，spriteWidth，spriteHeight，0,0，spriteWidth，spriteHeight）; 
 
 spritePosition ++; 
 if（spritePosition> spriteCount-1）{
 spritePosition = 0; 
 spritePlayCount ++; 
} 
}，1000 / fps）; 
} 
 
 objectS.onload = function（）{
 animate（objectS）; 
} 
}）; // end $（function（）{}）; 
  

我收到了很多观察到的错误，但我似乎找不到它的修复方法：
$ b

index3.html：59 Uncaught TypeError：未能在
'CanvasRenderingContext2D'上执行'drawImage'：提供的值不是类型
'（CSSImageValue或HTMLImageElement或HTMLVideoElement或
HTMLCanvasElement或ImageBitmap或OffscreenCanvas）'

你能帮我吗找出我的bug？

解决方案

您还需要传递 sprite requestAnimationFrame 调用动画功能时的参数> c>参数。 （function（）{
var canvas = document.getElementById（canvas）;
var ctx = canvas.getContext（2d）;
var spritePosition = 0;
var spriteWidth = 100;
var spriteHeight = 100;
var spriteCount = 40;
var spritePlayCount = 0;
var maxSpritePlays = 2;
var objectS = new Image（）;
objectS.src =sprites / first.png;
var fps = 50;

函数animate（sprite）{
setTimeout（function（）{
if（spritePlayCount< maxSpritePlays）{
requestAnimationFrame（function（）{
animate（sprite）;
}）;
}
//绘图代码在这里
ctx.clearRect（0，0，canvas.width，canvas.height）;
ctx.drawImage（sprite，spritePosition * spriteWidth，0，spriteWidth，spriteHeight，0，0，spriteWidth，spriteHeight）;
spritePosition ++;
if（spritePosition> spriteCount - 1）{
spritePosition = 0;
spritePlayCount ++;
}
}，1000 / fps）;
}
objectS.onload = function（）{
animate（objectS）;
};
}）;


I found a lovely code snippet on canvas spritesheet animations. this is ts:

http://jsfiddle.net/m1erickson/h85Gq/

I tried to beautify this code, by writing an animate function that accepts Image objects, so that I can animate multiple images in my canvas simultaneously. This is my attempt at it:

    $(function(){
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var spritePosition=0;
        var spriteWidth=100;
        var spriteHeight=100;
        var spriteCount=40;
        var spritePlayCount=0;
        var maxSpritePlays=2;

        var objectS=new Image();
        objectS.src="sprites/first.png";

        var fps = 50;
        function animate(sprite) {
            setTimeout(function() {

                if(spritePlayCount<maxSpritePlays){
                    requestAnimationFrame(animate);
                }

                // Drawing code goes here
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.drawImage(sprite,spritePosition*spriteWidth, 0,spriteWidth, spriteHeight, 0,0,spriteWidth, spriteHeight);

                spritePosition++;
                if(spritePosition>spriteCount-1){
                    spritePosition=0;
                    spritePlayCount++;
                }
            }, 1000 / fps);
        }

        objectS.onload=function(){
            animate(objectS);
        }
    }); // end $(function(){});

I am getting a much observed error, but I cant seem to find the fix for it:

index3.html:59 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

Can you help me out finding my bug?

解决方案

You'll also need to pass the sprite parameter when calling the animate function using requestAnimationFrame.

$(function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var spritePosition = 0;
    var spriteWidth = 100;
    var spriteHeight = 100;
    var spriteCount = 40;
    var spritePlayCount = 0;
    var maxSpritePlays = 2;
    var objectS = new Image();
    objectS.src = "sprites/first.png";
    var fps = 50;

    function animate(sprite) {
        setTimeout(function() {
            if (spritePlayCount < maxSpritePlays) {
                requestAnimationFrame(function() {
                    animate(sprite);
                });
            }
            // Drawing code goes here
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(sprite, spritePosition * spriteWidth, 0, spriteWidth, spriteHeight, 0, 0, spriteWidth, spriteHeight);
            spritePosition++;
            if (spritePosition > spriteCount - 1) {
                spritePosition = 0;
                spritePlayCount++;
            }
        }, 1000 / fps);
    }
    objectS.onload = function() {
        animate(objectS);
    };
});

这篇关于画布精灵表错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！