在畫布中對3個圖像進行動畫處理

Question

我需要為畫布中的3個雲彩動畫，它們應該在X軸上移動，一旦消失在右側，它們應該重新出現在左側。 每個雲應該在不同的X和Y軸起始位置，並且它們應該以不同的速度移動。

首先，我嘗試僅創建1個雲動畫，這是我想到的：

var canvas, context, docWidth, docHeight;

window.onload = function(){
    docWidth = window.innerWidth;
    docHeight =  window.innerHeight
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d')
    resizeCanvas(docWidth, docHeight);
    drawCloud(0, 0, docWidth, docHeight);
}

function resizeCanvas(width, height){
    canvas.width = docWidth;
    canvas.height = docHeight;
}

function drawCloud(x,y,width, height){
    var img = new Image();
    img.src = 'images/cloud1.png';

    img.onload = function(){
        context.save();
        context.clearRect(0,0,width,height);
        imageWidth = img.naturalWidth;
        imageHeight = img.naturalHeight;
        context.drawImage(img,x-imageWidth,10);
        context.restore();

        if(x >= width+imageWidth){
            x=0-imageWidth/2;
        } else {
            x += 3;
        }
        var loopTimer = setTimeout('drawCloud('+x+','+y+','+width+','+height+')',24);
    }
}

效果很好，我看到了雲動畫，它消失在右側，重新出現在左側。 現在有了3張圖像，這使事情變得復雜。 我嘗試了一種面向對象的方法：

首先在Canvas元素中，我嘗試預加載圖像：

<canvas id="canvas" width="0px" height="0px">
<script type="text/javascript">
    <!--//--><![CDATA[//><!--
        var images = new Array()
        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image()
                images[i].src = preload.arguments[i]
            }
        }
        preload(
            "images/cloud1.png",
            "images/cloud2.png",
            "images/cloud3.png"
        )
    //--><!]]>
</script>
</canvas>

然后，我嘗試創建Cloud對象：

function Cloud (x, y, width, height, filename, velocity, rate) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.filename = filename;
    this.velocity = velocity;
    this.rate = rate;
}

Cloud.prototype = {
    constructor:Cloud,
    moveCloud:function(imageWidth){
        if(x >= width+imageWidth){
            x=0-imageWidth/2;
        } else {
            x += velocity;
        }
    },
    getFilename:function(){
        return this.filename;
    },
    getX:function(){
        return this.x;
    },
    getY:function(){
        return this.y;
    }
}

然后這個繪圖功能：

function drawCloud(clouds, width, height){
    var img;
    var arrLength = clouds.length;

        context.save();
        context.clearRect(0,0,width,height);
        for(var i=0; i<arrLength; i++){
            var Cloud = clouds[i];
            img = new Image();
            img.src = Cloud.getFilename();
            imageWidth = img.naturalWidth;
            imageHeight = img.naturalHeight;
            context.drawImage(img, Cloud.getX()-imageWidth, Cloud.getY());
            clouds[i].moveCloud(imageWidth);
        }

        context.restore();

        var loopTimer = setTimeout('drawCloud('+clouds+', '+width+', '+height+')',24);

}

最后，我在window.onload調用此函數：

var canvas, context, docWidth, docHeight;

window.onload = function(){
    docWidth = window.innerWidth;
    docHeight =  window.innerHeight
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d')
    resizeCanvas(docWidth, docHeight);

    var cloud1 = new Cloud(0, 10, docWidth, docHeight, 'images/cloud1.png', 3, 24);
    var cloud2 = new Cloud(400, 10, docWidth, docHeight, 'images/cloud2.png', 5, 24);
    var cloud3 = new Cloud(160, 10, docWidth, docHeight, 'images/cloud3.png', 1, 24);
    var clouds = [cloud1, cloud2, cloud3];
    drawCloud(clouds, docWidth, docHeight);
}

現在我什至看不到畫布上的雲彩圖像，更不用說它們的動畫了。 任何想法如何使其工作？

Answer 1

我改善了您的煩惱並使其正常工作： http : //jsfiddle.net/z3azsn5a/3/

我必須修復一些問題，您可以將原始資源與我的原始資源進行比較，但最重要的是：

1. setTimeOut應該獲得一個函數，而不是帶有參數的內置字符串
2. 您在內部范圍內重新定義了Cloud ，不確定是否會引起任何問題，但這是一個不好的做法。
3. canvas元素內有JavaScript
4. jsfiddle被配置為在onload事件中包含代碼，並且您自己聲明了該事件，因此window.onload沒有運行