HTML5 canvas photo slide show issue

Привет, я нашел this code on Stackoverflow для слайд-шоу на холсте, но мне просто интересно, как сделать переходы между изображениями медленнее?HTML5 canvas photo slide show issue

var loaded = 0, numOfImages = 4; 

//first part of chain, invoke async load 
var image0 = document.createElement('img'); //this will work in new Chrome 
var image1 = document.createElement('img'); //instead of new Image 
var image2 = document.createElement('img'); 
var image3 = document.createElement('img'); 

//common event handler when images has loaded with counter 
//to know that all images has loaded 
image0.onload = image1.onload = 
image2.onload = image3.onload = function(e) { 
    loaded+; 
    if (loaded === numOfImages) 

     draw(); // <-- second part of chain, invoke loop 
} 

//show if any error occurs 
image0.onerror = image1.onerror = 
image2.onerror = image3.onerror = function(e) { 
    console.log(e); 
} 

//invoke async loading... you can put these four into your 
//window.onload if you want to 
image0.src = "img/pic1.jpg"; 
image1.src = "img/pic2.jpg"; 
image2.src = "img/pic3.jpg"; 
image3.src = "img/pic4.jpg"; 

// this is the main function 
function draw() { 

    var images = new Array(image0, image1, image2, image3), 
     counter = 0, 
     maxNum = images.length - 1, 

     myCanvas = document.getElementById('myCanvas'), 
     ctx = myCanvas.getContext('2d'), 

     me = this; //this we need for setTimeout() 

    //third part of chain, have a function to invoke by setTimeout 
    this._draw = function() { 

     //if the next image will cover the canvas 
     //there is no real need to clear the canvas first. 
     //I'll leave it here as you ask for this specifically 
     ctx.clearRect(0, 0, myCanvas.width, myCanvas.height) 
     ctx.drawImage(images[counter++], 0, 0); 
     if (counter > maxNum) counter = 0; 

     setTimeout(me._draw, 1000); //here we use me instead of this 
    } 
    this._draw(); //START the loop 
}

, но мне просто интересно, как сделать переходы между изображениями медленнее?

источник

2013-09-25 meanmax

У вас есть опечатка в ваших методах OnLoad:

loaded++; // instead of loaded+;

SetTimeout контролирует задержку до me._draw не вызывается снова.

К примеру 3 секунды задержки будет 3000 миллисекунд, как это:

setTimeout(me._draw, 3000);

Если вместо этого вы хотите фактический переход, вы могли бы использовать что-то вроде этого:

changing images on a canvas with transitions

Здесь это код и сценарий: http://jsfiddle.net/m1erickson/m8E6J/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
<script src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
    $(function(){ 

    var loaded = 0, numOfImages = 4; 

    //first part of chain, invoke async load 
    var image0 = document.createElement('img'); //this will work in new Chrome 
    var image1 = document.createElement('img'); //instead of new Image 
    var image2 = document.createElement('img'); 
    var image3 = document.createElement('img'); 

    //common event handler when images has loaded with counter 
    //to know that all images has loaded 
    image0.onload = image1.onload = 
    image2.onload = image3.onload = function(e) { 
     loaded++; 
     if (loaded === numOfImages) 

      draw(); // <-- second part of chain, invoke loop 
    } 

    //show if any error occurs 
    image0.onerror = image1.onerror = 
    image2.onerror = image3.onerror = function(e) { 
     console.log(e); 
    } 

    //invoke async loading... you can put these four into your 
    //window.onload if you want to 
    image0.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg"; 
    image1.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg"; 
    image2.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg"; 
    image3.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-4.jpg"; 

    // this is the main function 
    function draw() { 

     var images = new Array(image0, image1, image2, image3), 
      counter = 0, 
      maxNum = images.length - 1, 

      myCanvas = document.getElementById('myCanvas'), 
      ctx = myCanvas.getContext('2d'), 

      me = this; //this we need for setTimeout() 

     //third part of chain, have a function to invoke by setTimeout 
     this._draw = function() { 

      //if the next image will cover the canvas 
      //there is no real need to clear the canvas first. 
      //I'll leave it here as you ask for this specifically 
      ctx.clearRect(0, 0, myCanvas.width, myCanvas.height) 
      ctx.drawImage(images[counter++], 0, 0); 
      if (counter > maxNum) counter = 0; 

      setTimeout(me._draw, 3000); //here we use me instead of this 
     } 
     this._draw(); //START the loop 
    } 


    }); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="myCanvas" width=600 height=400></canvas> 
</body> 
</html>

источник

2013-09-25 15:38:19 markE

Я изменил setTimeout, но по какой-то причине это не имеет значения? есть идеи? – meanmax

У вас есть опечатка в вашем коде: загружен + должен быть загружен ++. В любом случае, здесь приведен пример использования задержки 3000 мс вместо задержки 1000 мс. Ура! – markE

Спасибо !!! :) – meanmax

HTML5 canvas photo slide show issue

ответ

Смежные вопросы