HTML5畫布照片幻燈片放映問題

Question

嗨，我在Stackoverflow上找到了用於畫布照片幻燈片放映的這段代碼，但是我只是想知道如何使圖像之間的過渡更慢？

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
}

但我只是想知道如何使圖像之間的過渡變慢？

Answer 1

您的onload方法中有一個錯字：

loaded++;  // instead of loaded+;

setTimeout控制直到再次調用me._draw的延遲。

例如，3秒的延遲將為3000毫秒，如下所示：

setTimeout(me._draw, 3000);

如果您想進行實際的過渡，則可以使用以下方法：

通過過渡更改畫布上的圖像

這是代碼和小提琴： 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>

HTML5畫布照片幻燈片放映問題

問題描述

1 個解決方案

解決方案1
0 已采納 2013-09-25 15:38:19

HTML5畫布照片幻燈片放映問題

問題描述

1 個解決方案

解決方案1 0 已采納 2013-09-25 15:38:19

解決方案1
0 已采納 2013-09-25 15:38:19