在HTML5上绘制多个精灵图像

Drawing multiple sprite images on the HTML5

本文关键字：精灵 图像 绘制 HTML5      更新时间：2023-09-26

目前我已经把一些函数放在一个类中。所以对于我来说，将多个精灵图像存储在一个数组中会更容易。然而，是否有一种方法，我可以手动绘制它们，而不是我通过数组输出设置它，它自动绘制?下面是我的代码:

<!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>

手动添加鱼:

HTML: 

<button id="button" > Add a fish! </button>

JS: 

document.getElementById("button").onclick = function() {
        var anotherFish = new Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight);
        fishes.push(anotherFish);
        anotherFish.drawFish();
    animate();
};

你的代码在那里，我只是复制它并把它放在一个even listener

相关文章：