改变画布上的图像 [英] 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
可以通过使用 context.setGlobalAlpha 逐渐更改图像不透明度来完成
Can be done by gradually changing your images opacity using context.setGlobalAlpha
幻灯片
可以通过逐步更改 context.drawimage的x， （imageObj，x，y）
这里是代码和小提琴： http://jsfiddle.net/m1erickson/5sAS9/
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>
这篇关于改变画布上的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
