javascript和HTML画布动画图像发射器

Question

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

目前，我的云朵没有动。 我可以在不同的位置生成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（）函数进行控制台以确保数据更改，并且确实如此。 但它不能从视觉上反映出来？？？

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(cx >= 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>