Question

我需要在画布上制作3幅云图像，它们应该在X轴上移动，一旦它们在右侧消失，它们应该重新出现在左侧。每个云应位于不同的X和Y轴起始位置，它们应以不同的速度移动。

首先，我尝试只创建一个云动画，这就是我想出来的：

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张图片，事情变得复杂了。我尝试了一种OOP方法：

首先在我的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>

然后我尝试创建云对象：

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

我改进了你的fiddel并让它发挥作用：http://jsfiddle.net/z3azsn5a/3/

我必须解决一些问题，你可以将你的原始资料与我的资料进行比较，但最重要的是：

setTimeOut应该获取一个函数而不是带参数的构建字符串
您在内部范围内重新定义了Cloud，不确定这是否会导致任何问题，但这是一种不好的做法。
canvas元素
jsfiddle配置为在onload事件中包含代码，并且您自己声明了该事件，因此window.onload未运行

在画布中动画3个图像

1 个答案: