【实例简介】HTML5 canvas扑克牌花式洗牌动画基于jquery.1.10.2.min.js制作，扑克牌发牌，洗牌动画。

【实例截图】

【核心代码】

CARD.prototype = {

WIDTH_RATIO : 1 / 12,

HEIGHT_RATIO : 1 / 8,

SCALE_RATIO : 4 / 5,

init : function(){

var index = this.column * this.renderer.ROW this.row;

this.width = Math.min(this.renderer.width, this.renderer.height) * this.WIDTH_RATIO;

this.height = Math.min(this.renderer.width, this.renderer.height) * this.HEIGHT_RATIO;

this.axis = [

{x : this.renderer.width / 2, y : this.renderer.height / 2},

{x : this.renderer.width / 4 this.renderer.width / 2 * (this.row % 2), y : this.renderer.height / 4 this.renderer.height / 2 * Math.floor(this.row / 2)},

{x : this.width * 2, y : this.renderer.height / 8 this.height / 2 this.renderer.height / 4 * this.row},

{x : this.width / 2 (this.renderer.width - this.width * 3 / 2) * this.column / this.renderer.COLUMN, y : this.renderer.height / 8 this.height / 2 this.renderer.height / 4 * this.row},

{x : this.width / 2 (this.renderer.width - this.width * 2) * index / this.renderer.ROW / this.renderer.COLUMN, y : this.renderer.height / 2 this.height / 2},

{x : this.width / 2 (this.renderer.width - this.width * 2) * index / this.renderer.ROW / this.renderer.COLUMN, y : this.height * 3 / 2 (this.renderer.height - this.height * 2) * (1 - Math.abs(1 - index / this.renderer.ROW / this.renderer.COLUMN * 2))},

{x : this.renderer.width / 6 this.renderer.width / 3 * (this.column % 3), y : this.renderer.height / 10 this.height / 2 this.renderer.height / 4 * Math.floor(this.column / 3)},

{x : this.renderer.width / 2, y : this.renderer.height / 2}

];

this.radian = [index / this.renderer.ROW / this.renderer.COLUMN, this.column / this.renderer.COLUMN, this.row / (this.renderer.ROW - 1)];

this.scale = this.SCALE_RATIO * this.row / (this.renderer.ROW - 1);

this.hue = this.radian[0] * 360 | 0;

},

controlStatus : function(context, status, rate){

if(status == 0){

this.x = this.axis[status].x;

this.y = this.axis[status].y;

}else{

var next = (status == this.renderer.MAX_STATUS) ? 0 : status;

this.x = this.axis[status - 1].x (this.axis[next].x - this.axis[status - 1].x) * rate;

this.y = this.axis[status - 1].y (this.axis[next].y - this.axis[status - 1].y) * rate;

}

switch(status){

case 0:

context.rotate(this.radian[0] * Math.PI * 2 * rate);

context.translate(0, -this.height);

break;

case 1:

context.rotate(this.translateAngle(this.radian[0] * Math.PI * 2, this.radian[1] * Math.PI * 2, rate));

context.translate(0, -this.height * (1 - rate));

break;

case 2:

context.rotate(this.translateAngle(this.radian[1] * Math.PI * 2, Math.PI * 2, rate));

break;

case 6:

context.rotate((this.radian[2] * Math.PI / 2 - Math.PI / 4) * rate);

context.translate(-this.width / 2 * rate, 0);

break;

case 7:

context.rotate(this.translateAngle(this.radian[2] * Math.PI / 2 - Math.PI / 4, this.radian[1] * Math.PI * 2, rate));

context.scale(1 - this.scale * rate, 1 - this.scale * rate);

context.translate(-this.width / 2, -this.height * 3 * rate);

break;

case 8:

context.rotate(this.translateAngle(this.radian[1] * Math.PI * 2, this.radian[0] * Math.PI * 2, rate));

context.scale(1 - this.scale * (1 - rate), 1 - this.scale * (1 - rate));

context.translate(-this.width / 2 * (1 - rate), this.height * (2 * rate - 3));

}

},

translateAngle : function(source, destination, rate){

return source (destination - source) * rate;

},

render : function(context, status, rate){

context.save();

context.translate(this.x, this.y);

this.controlStatus(context, status, rate);

context.lineWidth = this.width / 20;

context.strokeStyle = 'hsl(' this.hue ', 60%, 90%)';

context.fillStyle = 'hsl(' this.hue ', 60%, 60%)';

context.fillRect(0, -this.height, this.width, this.height);

context.strokeRect(0, -this.height, this.width, this.height);

context.restore();

}

};