changing images on a canvas with transitions

The following code makes different pics appear on my canvas. how do I make them change with nice transitions like fade and slide?

setInterval(function () {
    if (i >= carInfo.length) {
        i = 0;
    }
    imageObj.onload = function () {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillText(textVar, 10, 10);
        context.drawImage(imageObj, 69, 50);
    };
    imageObj.src = '' + carInfo[i].Picture + '';
    var textVar = "" + carInfo[i].carType + ": " + carInfo[i].Description;
   // alert(textVar);
    i++
},2000);

Fade in/out

Can be done by gradually changing your images opacity using context.setGlobalAlpha

Slides

Can be done by gradually changing the x,y coordinate of context.drawimage(imageObj,x,y)

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/5sAS9/

<!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 canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        window.requestAnimFrame = (function(callback) {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();


        var imageIndex=0;
        var animPctComplete=0;
        var fps = 60;

        // image loader

        var imageURLs=[];
        var imagesOK=0;
        var imgs=[];
        imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg");
        imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg");
        imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg");
        loadAllImages();

        function loadAllImages(callback){
            for (var i = 0; i < imageURLs.length; i++) {
                var img = new Image();
                imgs.push(img);
                img.onload = function(){ 
                    imagesOK++; 
                    if (imagesOK==imageURLs.length ) {
                        animate();
                    }
                }; 
                img.src = imageURLs[i];
            }      
        }

        function animate() {
            setTimeout(function() {
                requestAnimFrame(animate);

                // get the current image
                // get the xy where the image will be drawn
                var img=imgs[imageIndex];
                var imgX=(canvas.width/2-img.width/2)*animPctComplete;
                var imgY=(canvas.height/2)-img.height/2;

                // set the current opacity
                ctx.globalAlpha=animPctComplete;

                // draw the image
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.drawImage(img,imgX,imgY);

                // increment the animationPctComplete for next frame
                animPctComplete+=.01;  //100/fps;

                // if the current animation is complete
                // reset the animation with the next image
                if(animPctComplete>=1.00){
                    animPctComplete=0.00;
                    imageIndex++;
                    if(imageIndex>=imgs.length){imageIndex=0;}
                }

            }, 1000 / fps);
        }


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

</head>

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

来源：https://stackoverflow.com/questions/18717457/changing-images-on-a-canvas-with-transitions

标签

javascript

image

canvas

transition