HTML5畫布照片幻燈片問題

嗨，我發現this code on Stackoverflow爲一個畫布照片幻燈片放映，但我只是想知道如何使圖像之間的轉換較慢？HTML5畫布照片幻燈片問題

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

你的代碼中有一個錯字：加載+應該加載++。無論如何，這裏是使用3000ms延遲而不是1000ms延遲的運行示例。乾杯! – markE

謝謝！ :) – meanmax

HTML5畫布照片幻燈片問題

回答

相關問題