Fatal编程技术网
  • javascript/
  • Javascript 在HTML5上绘制多个精灵图像

Javascript 在HTML5上绘制多个精灵图像

javascript arrays html

Javascript 在HTML5上绘制多个精灵图像,javascript,arrays,html,sprite,Javascript,Arrays,Html,Sprite,目前，我已将一些函数合并到一个类中。所以，对于我来说，在数组中存储多幅精灵图像会更容易。但是，是否有一种方法可以手动绘制它们，而不是通过数组outprint设置并自动绘制？这是我的密码： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Fish Animation<

目前，我已将一些函数合并到一个类中。所以，对于我来说，在数组中存储多幅精灵图像会更容易。但是，是否有一种方法可以手动绘制它们，而不是通过数组outprint设置并自动绘制？这是我的密码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Fish Animation</title>
  <style type='text/css'>
    canvas  {border:1px solid; background-color:#EFEFEF;}
  </style>

<script type='text/javascript'>
window.onload=function(){
var canvas = document.getElementById('pondCanvas');
var context = canvas.getContext('2d');
polyFillRAFNow() ;

var frameCount = 8 ; 
var frameWidth, frameHeight ; 
var frameScale = 0.4 ; 

var animIndex = 0 ;
var animFrames = [0, 1, 2, 3, 3, 4, 4, 5, 6, 6, 7, 6, 5, 4, 4, 3, 2, 2, 1, 1, 1];

var xPos = canvas.width / 2, 
yPos = canvas.height / 2;
var speedX;
var speedY;
var speedXSign;
var speedYSign;
var fishes = [];
var anotherFish;

function Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight) {
    this.image = imgFish;
    this.xPos = canvas.width / 2;
    this.yPos = canvas.height / 2;
    this.speedX = speedX;
    this.speedY = speedY;
    this.frameWidth = frameWidth;
    this.frameHeight = frameHeight;
    this.frameCount = 8;
    this.frameScale = 0.4;
    this.animIndex = 0;
    this.animFrames = [0, 1, 2, 3, 3, 4, 4, 5, 6, 6, 7, 6, 5, 4, 4, 3, 2, 2, 1, 1, 1];
}

Fish.prototype.changeDirection = function () {
    speedXSign = this.speedX > 0 ? 1 : -1;
    speedYSign = this.speedY > 0 ? 1 : -1;
    this.speedX = speedXSign * (1 + Math.random() * 1.7);
    this.speedY = speedYSign * (1 + Math.random() * 2);
};

Fish.prototype.move = function () {
this.animIndex++;
    if ( this.animIndex == animFrames.length) this.animIndex = 0;

    this.xPos += this.speedX;
    if ((this.xPos + this.frameWidth * this.frameScale / 1.8) >= canvas.width || 
        (this.xPos - this.frameWidth * this.frameScale / 1.8) <= 0) {
        this.speedX = -this.speedX;
    }

    this.yPos += this.speedY;
    if ((this.yPos + this.frameHeight * frameScale / 1.8) >= canvas.height || 
        (this.yPos - this.frameHeight * frameScale / 1.8) <= 0) {
        this.speedY = -this.speedY;
    }
};

Fish.prototype.drawFish = function () {
    context.save();
    context.translate(this.xPos, this.yPos);
    var speedXSign = this.speedX > 0 ? 1 : -1;
    var speedYSign = this.speedY > 0 ? 1 : -1;
    context.scale(speedXSign, speedYSign);
    var frameIndex = animFrames[this.animIndex];
    context.drawImage(imgFish, frameIndex * this.frameWidth, 0, frameWidth, frameHeight,
                    -frameWidth * frameScale / 2, -this.frameHeight * this.frameScale / 2, 
                        this.frameWidth * this.frameScale, this.frameHeight * this.frameScale);
    context.restore();
};

function animate() {
    requestAnimationFrame(animate);
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < fishes.length; i++){
        var fish = fishes[i];
        fish.changeDirection();
        fish.move();
        fish.drawFish();
    }
}

var imgFish = new Image();
imgFish.onload = init;
imgFish.src = 'http://dl.dropbox.com/s/4x14mv75dx7bmi5/FishStrip.png';

function init() {
    frameWidth = imgFish.width / frameCount ; 
    frameHeight = imgFish.height ; 

    for (var i = 0; i < 3; i++) {
        var anotherFish = new Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight);
        fishes.push(anotherFish);
        anotherFish.drawFish();
    }
    animate();
}

function polyFillRAFNow() {
    var w = window,
        foundRequestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame || w.oRequestAnimationFrame || function (cb)     {
            setTimeout(cb, 1000 / 60);
        };
    window.requestAnimationFrame = foundRequestAnimationFrame;
    }
}
</script>
</head>

<body>
  <canvas id="pondCanvas" width="1024" height="600">
        Canvas is not supported.
    </canvas>
</body>

</html>


鱼类动画
画布{边框：1px实心；背景色：#efef；}
window.onload=function（）{
var canvas=document.getElementById（'pondCanvas'）；
var context=canvas.getContext（'2d'）；
polyFillRAFNow（）；
var frameCount=8；
var frameWidth，frameHeight；
var frameScale=0.4；
var指数=0；
变量animFrames=[0,1,2,3,3,4,4,5,6,6,7,6,5,4,4,3,2,2,1,1]；
var xPos=canvas.width/2，
yPos=画布高度/2；
var-speedX；
快速变化；
var-speedXSign；
var-speedYSign；
var=[]；
另一种鱼类；
功能鱼（xPos、YPO、speedX、speedY、imgFish、帧宽、帧高）{
this.image=imgFish；
this.xPos=canvas.width/2；
this.yPos=canvas.height/2；
this.speedX=speedX；
这个。迅速的=迅速的；
this.frameWidth=frameWidth；
this.frameHeight=frameHeight；
这个.frameCount=8；
这个0.frameScale=0.4；
该指数=0；
this.animFrames=[0,1,2,3,3,4,4,5,6,6,7,6,5,4,4,3,2,2,1,1]；
}
Fish.prototype.changeDirection=函数（）{
speedXSign=this.speedX>0？1:-1；
speedYSign=this.speedY>0？1:-1；
this.speedX=speedXSign*（1+Math.random（）*1.7）；
this.speedY=speedYSign*（1+Math.random（）*2）；
};
Fish.prototype.move=函数（）{
这个.animIndex++；
如果（this.animIndex==animFrames.length）this.animIndex=0；
this.xPos+=this.speedX；
如果（（this.xPos+this.frameWidth*this.frameScale/1.8）>=canvas.width |
（this.xPos-this.frameWidth*this.frameScale/1.8）=canvas.height | |
（this.yPos-this.frameHeight*frameScale/1.8）0-1:-1；
var speedYSign=this.speedY>0？1:-1；
context.scale（speedXSign，speedYSign）；
var frameIndex=animFrames[this.animinindex]；
context.drawImage（imgFish，frameIndex*this.frameWidth，0，frameWidth，frameHeight，
-frameWidth*frameScale/2，-this.frameHeight*this.frameScale/2，
this.frameWidth*this.frameScale，this.frameHeight*this.frameScale）；
restore（）；
};
函数animate（）{
请求动画帧（动画）；
clearRect（0，0，canvas.width，canvas.height）；
对于（变量i=0；i
手动添加鱼类：

HTML:

您的代码就在那里，我只是复制了它并将其放在一个偶数侦听器中。

事实上，这个问题与画布无关。它是关于处理对象的。您必须将与一条鱼相关的所有数据存储在一个对象中，将鱼的所有实例存储在一个数组中，然后在此数组上迭代以更新并绘制动画中的鱼。查找有关对象和数组的教程。是的，我通过将所有函数存储到类中来处理示例代码。我刚刚将上面的代码编辑到最新版本，当我使用数组输出设置它时，它能够绘制多条鱼。但是有什么方法可以让我手动绘制它吗？请将您的move（）重命名为changeDirection（），newAnimationFrame（）和newAnimationFrame（）来移动（）。调用changeDirection，类似于：if（Math.random（）>0.995）fish.changeDirection（）；这样它只会不时地改变。现在你的代码很完美，我不明白你的问题。1）如果你能更精确地描述“按钮或其他东西”：-）2）共享fiddle链接。 
<button id="button" > Add a fish! </button>

document.getElementById("button").onclick = function() {

        var anotherFish = new Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight);
        fishes.push(anotherFish);
        anotherFish.drawFish();

    animate();
};