javascript 和 html canvas 动画图像发射器

Question

您好，我一直在观看一些有关 HTML Canvas 和动画的教程，我想创建自己的教程。不过我遇到了麻烦。 :/我正在尝试创建一些云，这些云从屏幕左侧开始移动到屏幕右侧，并最终在到达某个点时消失。我还没有那个代码。我不知道如何处理透明度。但是，这不是我的麻烦所在。

目前，我的云没有移动。我可以在不同位置生成 20 个不同的云，但它们无法移动。我已经用其他教程检查了我的代码，但我似乎找不到它不起作用的原因。也许是因为我使用的是图像？如果我能找到一些帮助，我将非常感激。谢谢。

$(function(){

    var leftcloudsrc = "ls/pics/cloud1.png";
    var rightcloudsrc = "ls/pics/cloud2.png";
    var canvas = document.getElementById('cloud');
    var cw = canvas.width;
    var ch = canvas.height;
    var cloudsArray = [];

    createclouds();

    function createclouds(){
    for (var i=0; i < 20; i++){
        var x = Math.random() * 150;
        var y = Math.random() * 300;
        var v = Math.random() * 4;
        cloudsArray.push(new Cloud(x, y, v));
    }
    animate();
    console.log(cloudsArray);
    }

    function animate(){
    requestAnimationFrame(animate); 
    for (var i = 0; i<cloudsArray.length; i++){
    cloudsArray[i].move();
    //new Cloud(x, y, v).create();
    }
    }
    function Cloud(x, y, v){
        this.x = x;
        this.y = y;
        this.v = v;
        this.create = function(){
        img = new Image,
        ctx = document.getElementById('cloud').getContext('2d');
        img.src = leftcloudsrc;
        var iw = img.naturalWidth;
        var ih = img.naturalHeight; 
        ctx.drawImage(img, x, y);
        }
        this.move = function(){
            this.x += this.v;
            this.create();
        }
    }
    // var cloud = new Cloud(0,0,0);
    // cloud.create();
});

我尝试写入控制台以确保信息已保存并粘贴，是的，确实如此。我什至尝试将 .move() 函数写入控制台以确保数据发生变化，而且确实如此。但它不反射(reflect)视觉？？？

Answer 1

ctx.drawImage(img, x, y); // wrong
ctx.drawImage(img, this.x, this.y); // right

您没有更新 x 和 y。您正在更新 this.x 和 this.y

完整代码

// test
    var leftcloudsrc = "http://www.freepngimg.com/download/cloud/10-cloud-png-image.png";
    var rightcloudsrc = "ls/pics/cloud2.png";
    var canvas = document.getElementById('cloud');
    
    // you dont have to define ctx again and again
    var ctx = canvas.getContext('2d');
    var cw = canvas.width;
    var ch = canvas.height;
    var cloudsArray = [];

    createclouds();

    function createclouds() {
        for (var i = 0; i < 20; i++) {
            var x = Math.random() * 150;
            var y = Math.random() * 300;
            var v = Math.random() * 4;
            cloudsArray.push(new Cloud(x, y, v));
        }
        animate();
        console.log(cloudsArray);
    }

    function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, cw, ch)
        for (var i = 0; i < cloudsArray.length; i++) {
            var c = cloudsArray[i]
            c.move();
            // remove when crosses the canvas width
            if(c.x >= 500) {
              cloudsArray.splice(i, 1);
            }
            
            //new Cloud(x, y, v).create();
        }
    }

    function Cloud(x, y, v) {
        this.x = x;
        this.y = y;
        this.v = v;
        this.create = function() {
            // invoke the constructor
            var img = new Image;

            img.src = leftcloudsrc;
            var iw = img.naturalWidth;
            var ih = img.naturalHeight;
            ctx.drawImage(img, this.x, this.y);
        }
        this.move = function() {
            this.x += this.v;
            this.create();
        }
    }

<canvas id="cloud" width="500" height="400"></canvas>