我看到了一个 JQuery Shuffle 示例，链接在此：Example。我试着使用 HTML5 和 Canvas + CSS + JS 与图片实现相同的效果，但是发现使用 Canvas 进行动画/绘图有些困难。我只想创建与图片数量相同的 Canvas，然后尝试移动 Canvas 来进行洗牌动画。是否有任何库可以实现相同的效果？希望有人能帮助我。编辑：这是我使用 Jquery 实现效果的方式（还存在一些错误）。我已经使用了 Jquery 和一些库来实现效果，但基本上是通过操纵 CSS 值来实现的。我正在尝试使用基于 Canvas 的绘图 API 来做一些事情。
感谢大家。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
canvas
{
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height:600px;
}
.easing_example {
border:1px solid #777777;
padding:0.5em;
position:relative;
width:4em;
}
img {display:none;}
.landscape #ps_container{ width: 1000px; height: 600px; }
#ecard-wrapper{ margin: 20px auto; width: 980px; }
#ps_container{ border: 1px solid #c2c2c2; margin: 25px 20px 0 0; overflow: hidden; position: relative; float: left; }
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript">
</script>
<script src="js/jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="js/jquery-css-transform.js" type="text/javascript">
</script>
<script src="js/jquery-animate-css-rotate-scale.js" type="text/javascript">
</script>
<script type="text/javascript">
var viewport = { obj: null, width: 0, height: 0 };
var timerId=null;
var timeInterval=10;
var factor=5;
var topZIndex=0;
var currentCanvasCount=0;
function CVImage()
{
this.ImageSource = null;//string
this.size ={ x: 0, y: 0 };
this.position = {x: 0, y: 0};
this.Rotate = 0;
this.Canvas = null;
this.Context = null;
this.Image =null;
}
CVImage.prototype.draw = function()
{
var img = new Image();
img.src = this.ImageSource;
this.Image=img;
var context = this.Context;
context.drawImage(img,this.position.x - this.size.x /2,this.position.y - this.size.y /2,
this.size.x, this.size.y);
}
CVImage.prototype.update =function(){
var context = this.Context;
context.save();
context.clearRect(0,0, this.Canvas.width, this.Canvas.height);
context.translate(this.size.x/2,this.size.y/2);
context.rotate(this.Rotate * Math.PI/180);
this.draw();
context.restore();
}
CVImage.prototype.slideOut =function(){
var context = this.Context;
var canvas = this.Canvas;
$(canvas)
.animate(
{left: 10,top: -20},
{
duration: 700,
easing: 'easeOutBack'
})
.animate(
{rotate: '20deg',top:-250,left:375},
{
duration: 1000,
easing: 'easeOutBack',
complete : function(){topZIndex--;$(this).css("z-index", topZIndex);}
})
.animate(
{top:0,left: 0,rotate: '0deg'},
{
duration: 1000,
easing: 'easeOutBack',
complete:continueAnimation
});
}
function continueAnimation()
{
if( currentCanvasCount >0)
{
var canvasObj = CanvasArr[currentCanvasCount-1];
if(canvasObj!=null)
{
canvasObj.slideOut();
currentCanvasCount--;
}
}
else if(currentCanvasCount == 0)
{
startShuffle();
}
}
$(document).ready(function() {
init();
$("#start_flip").click( function(){
startShuffle();
});
});
var CanvasArr = new Array();
function startShuffle(){
var i =0;
currentCanvasCount=CanvasArr.length;
continueAnimation();
}
function init()
{
var i = 0;
viewport.obj = $('#ps_container');
viewport.width = viewport.obj[0].clientWidth;
viewport.height = viewport.obj[0].clientHeight;
var images = $(".images_collection img");
for (i = 0; i < images.length ; i++)
{
var cid = "canvas_" + ""+i;
var canvas = document.getElementById(cid);
canvas.width = viewport.width;
canvas.height = viewport.height;
var ctx = canvas.getContext('2d');
var cvimg = new CVImage();
cvimg.ImageSource = images[i].src;
cvimg.size.x = parseInt(images[i].width);
cvimg.size.y = parseInt(images[i].height);
cvimg.position.x = 350;
cvimg.position.y = 250;
cvimg.Canvas = canvas;
cvimg.Context = ctx;
CanvasArr.push(cvimg);
}
DrawCanvas();
//timerId = setInterval(DrawCanvas,timeInterval);
}
function DrawCanvas()
{
var i =0;
var canv =null;
for(i=0;i<CanvasArr.length;i++)
{
canv = CanvasArr[i];
canv.update();
}
}
</script>
</head>
<body>
<a href="#" id="start_flip">START SHUFFLE</a>
<a href="#" id="stop_flip">STOPP SHUFFLE</a>
<div class="easing_example" id="easing_example_3" style="left: 0px;">Click Me</div>
<div id="images_collection" class="images_collection" style="display: none">
<a href="#">
<img src="images/Chichen Itza.jpg" alt="" /></a> <a href="#">
<img src="images/Great Wall of China.jpg" alt="" /></a> <a href="#">
<img src="images/Machu Picchu.jpg" alt="" /></a>
</div>
<div id="ecard-wrapper" class="landscape">
<div id="ps_container" style="display: block; position: fixed; top: 150px; left: 80px">
<canvas id="canvas_0" height="800" width="600" ></canvas>
<canvas id="canvas_1" height="800" width="600" ></canvas>
<canvas id="canvas_2" height="800" width="600" ></canvas>
<canvas id="canvas_3" height="800" width="600" ></canvas>
</div>
</div>
</body>
</html>
感谢大家。