android扑克发牌动画,html5 canvas扑克牌发牌动画特效

特效描述：html5 canvas 扑克牌发牌动画。花式扑克牌动画特效

代码结构

1. 引入JS

2. HTML代码

var RENDERER = {

ROW : 4,

COLUMN : 12,

MAX_STATUS_COUNT : 100,

MAX_WAITING_COUNT : 30,

MAX_STATUS : 8,

init : function(){

this.setParameters();

this.createCards();

this.reconstructMethods();

this.render();

},

setParameters : function(){

this.$container = $('#jsi-cards-container');

this.width = this.$container.width();

this.height = this.$container.height();

this.$canvas = $('').attr({width : this.width, height : this.height}).appendTo(this.$container);

this.context = this.$canvas.get(0).getContext('2d');

this.cards = [];

this.status = 0;

this.statusCount = 0;

this.waitingCount = 0;

this.gradient = this.context.createRadialGradient(this.width / 2, this.height / 2, 0, this.width / 2, this.height / 2, Math.sqrt(Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2)));

this.gradient.addColorStop(0, 'hsl(210, 100%, 30%)');

this.gradient.addColorStop(1, 'hsl(210, 100%, 10%)');

},

createCards : function(){

for(var i = 0; i < this.ROW; i++){

for(var j = 0; j < this.COLUMN; j++){

this.cards.push