动画图像从底部平稳地上升到画布上。

Question

我试图把图片添加到我的画布上，然后慢慢地让它们从屏幕上滑落。我把它设置好了，这样图像就会不断增加，然后它们就会在屏幕上显示出来。我想添加一个新的图像在画布上点击，然后这个相同的图像慢慢滑出屏幕。

下面是我的尝试。它将图像添加到画布上，它们在屏幕上移动，但这是一种令人眼花缭乱的现象，而不是期望的行为。

​

var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = windowWidth;
canvas.height = windowHeight;
var x = windowHeight;


function newImage() {
  var images = [
    'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
    'http://www.convoy.me/image/landing/Scratcher.png',
    'http://www.convoy.me/image/landing/push_harder_0006.png',
    'http://www.convoy.me/image/landing/Scratcher.png',
    'http://www.convoy.me/image/landing/Screen-Shot-2015-12-04-at-17.14.41.jpg'

  ];
  var randomImage = parseInt(Math.random() * images.length);
  var randomPosition = parseInt(Math.random() * 1200);


  var imageObj = new Image();
  imageObj.onload = function() {
    ctx.drawImage(imageObj, randomPosition, x, 200, 200);
  };
  imageObj.src = images[randomImage];

}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x--;
  newImage();
}

setInterval(draw, 50);
canvas.addEventListener("click", draw, false);

<canvas id="canvas"></canvas>

​

Answer 1

我希望这段代码能对你有所帮助。

​

var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = windowWidth;
canvas.height = windowHeight;


function newImage() {
    var randomPosition = parseInt(Math.random() * 1200);
    var images = [
        'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
        'http://www.convoy.me/image/landing/Scratcher.png',
        'http://www.convoy.me/image/landing/push_harder_0006.png',
        'http://www.convoy.me/image/landing/Scratcher.png',
        'http://www.convoy.me/image/landing/Screen-Shot-2015-12-04-at-17.14.41.jpg'
    ];
    var y = windowHeight;
    var randomImage = parseInt(Math.random() * images.length);

    (function draw() {
        var imageObj = new Image();
        imageObj.onload = function () {
            ctx.clearRect(randomPosition - imageObj.width, y, imageObj.width,imageObj.height);
            
            y-=5;
            ctx.drawImage(imageObj, randomPosition - imageObj.width, y, imageObj.width,imageObj.height );

            if (y > -imageObj.height){
                requestAnimationFrame(draw)
            }
        };
        imageObj.src = images[randomImage];
    })();
}

canvas.addEventListener("click", newImage, false);

<canvas id="canvas"></canvas>

​