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);
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);
1 Answer
Reset to default 3Fade 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/m1erickson/5sAS9/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery./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./u/139992952/stackoverflow/house204-1.jpg");
imageURLs.push("https://dl.dropboxusercontent./u/139992952/stackoverflow/house204-2.jpg");
imageURLs.push("https://dl.dropboxusercontent./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 plete
// 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>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745431262a4627400.html
评论列表（0条）