キャンバスを下からスムーズにアニメートする

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>

Answer 2

あなたはドロー関数からのロードを分離する必要があります。

私はあなたはそれが無限のイメージリスト（だけでなく、実用的に可能な限り無限に近い）になりたいと仮定

あなたは、画像の「キュー」を維持したいと思うでしょう、どのように多くのあなたが期待する頻度に依存しますユーザーはクリックして、画像の大きさを知ることができます。

キューのプログラミングでは、関数namesakesを持つ配列です。先入れ先出しでは、新しいアイテムは最後に場所があり、古いアイテムは最初から削除されます。 （ファーストインファーストアウトルールが適用される限り、どのような方法でも問題ありません）

このため、キューは画像がプリロードされ、必要なときに表示できる状態になります。

イメージキュー。

// the images 
var imageURLs = ["img1.jpg","img2.jpg","img3.jpg",...,"img_n.jpg"]; 
var imageQueue = []; // empty. 

function addImageToQueue(URL){ 
    var img = new Image(); 
    img.src = URL; 
    img.onload = function(){ 
     this.ready = true; // mark the image as loaded and ready 
    } 
    img.onerror = function(){ 
     this.ready = true; // is ready 
     this.error = true; // but can not be displayed 
    } 
    imageQueue.push(img); 
} 

// get an image if ready from the queue 
// return undefined if nothing is ready 
// removes errored images and returns first non error if ready 
function getNextImage(){ 
    if(imageQueue.length > 0){ 
     if(imageQueue[0].ready && !imageQueue[0].error){ // is image ready and no error 
      return imageQueue.shift(); // remove from the list and return 
     }else{ 
      while(imageQueue.length > 0 && imageQueue[0].ready && !imageQueue[0].error){ 
       // remove bad images 
       imageQueue.shift(); 
      } 
      // no need to check error just did that 
      if(imageQueue.length > 0 && imageQueue[0].ready){// if any left and ready 
       return imageQueue.shift(); // remove from the list and return 
      } 
    } 
} 

いいえイメージキューを設定してアニメーションを処理できません。これは標準のアニメーションメソッドです。

function update(time){ // time is supplied by browser 
     ctx.clearRect(0,0,ctx.width,ctx.height); // clear 
     manageImageQueue(); 
     drawImages(); 
     requestAnimationFrame(update); 
} 
requestAnimationFrame(update); 

それらがアップ

const queueLen = 5; // number of images to keep in the queue 
var displayImages = []; // current displayed images 
var nextImage = true; // if true get a loaded image and add to display list 
function manageImageQueue(){ 
    while(imageQueue.length < queueLen && imageURLs.length > 0){ 
     addImageToQueue(imageURLs.shift()); // add an image 
    } 
    if(nextImage){ 
     var image = getNextImage(); 
     if(image !== undefined){ 

       // not sure where you want image to start so I put it bottom center 
       // all existing image increase the speed so that they move of canvas 
       displayImages.forEach(function(img){ img.yStep += -1; }); 
       displayImages.push({ 
       image : img, 
       x : ctx.canvas.width/2 - image.width/2, 
       y : ctx.canvas.height - image.height, 
       yStep : 0, // dont move 
       }); 
       nextImage = false; 
     } 
    } 
} 
function drawImages(){ 
    for(var i = 0; i < displayImages.length; i ++){ 
     var img = displayImages[i]; // get image 
     img.y += img.yStep; // move image 
     if(img.y + img.image.height < 0){ // if off screen 
       displayImages.splice(i,1); // remove image 
       i-= 1; // step back so we dont skip the next image if there is one 
     }else{ 
       ctx.drawImage(img.image,img.x,img.y); // draw the image 
     } 
    } 
} 

これらの機能を設定するには

を命名されているように、2つの機能manageImageQueueとdrawImagesはやる今、私たちが必要とするすべては、それがすべてになり始めユーザーイベントです。

function nextImage(){ // you add this to what ever event 
    nextimage = true; // flag that a new image is needed. 
} 

それだけです。

これは、フラグnextImageがtrueのときにキャンバスに利用可能な画像を追加して画像をプリロードします。使用可能なイメージがない場合、イメージが存在するまで待ってから追加します。キャンバス上の画像は、新しい画像が追加されると上に移動するように設定されます。

これは、imageURLsアレイにイメージがなくなるまで行います。

デモを追加しようとしましたが、誰かがすでにあなたを助けてくれたので、それだけでそれを残します。そこに私の答えにいくつかのタイプミス..あなたはこのコードを使用して問題がある場合はコメントを追加します..

:)