0

I am trying to create flip card effect using html canvas by drawing it in the canvas.

no ccs3 tricks needed. It should be done in a native manner;

this is my initial test using phaser.js by changing the scale

<html>
<head>

</head>
    <body>
        <div id="game_canvas">


        </div>
        <script src = "jquery.min.js"></script>
        <script src = "phaser.min.js"></script>

        <script>

        var game;
        var sprite;

            $(document).ready(function(){

                game = new  Phaser.Game(640, 480, Phaser.AUTO, 'game_canvas', {
                    preload : preload,
                    create : create,
                    update : update

                });

                function preload () {

                    game.load.image('card','download.png');

                }

                function create() {

                    this.delay = 1000;
                    this.spawn = 0;

                    sprite = game.add.sprite(game.width/4, game.height/4, 'card');

                }

                function update() {

                    console.log(this.spawn > game.time.now);

                    if (this.spawn > game.time.now) {
                        return;
                    }

                    this.spawn = game.time.now + this.delay;

                    sprite.scale.x *= -1;

                }

            });

        </script>

    </body>
</html>

and what i want to attain is like this using the canvas

http://www.turnjs.com/#samples/steve-jobs/10

anyone has any idea on how to do it would be a great help

thanks in advance

here is the current demo http://sopronioli713.github.io/test/

Josua Marcel C
  • 3,122
  • 6
  • 45
  • 87
Oli Soproni B.
  • 2,774
  • 3
  • 22
  • 47

1 Answers1

3

Here's a canvas based card flip (with rotation) that I did a while back for fun.

It works by scaling in just the X direction so that the card appears to be flipping.

Notes about the effect:

You can omit the rotations if they are not required.

This effect translates to the horizontal center of the card before scaling (flipping) which makes the card "spin". If you instead want a "dealers flip" then you would instead translate to the edge of the card.

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var x=150;
var y=150;
var scaleX=100;
var angle=0;
var scaleDirection=-1;
var scaleDelta=1;
var PI2=Math.PI*2;

var backCanvas=document.createElement('canvas');
var backCtx=backCanvas.getContext('2d');
var imgCount=2;
var front=new Image();front.onload=start;front.src="https://dl.dropboxusercontent.com/u/139992952/multple/kingcard.png";
var back=new Image();back.onload=start;back.src="https://dl.dropboxusercontent.com/u/139992952/multple/kingcardback.png";
function start(){
  if(--imgCount>0){return;}
  animate();
}


function draw(x,y,scaleX,angle){
  ctx.clearRect(0,0,cw,ch);
  ctx.translate(x,y);
  ctx.rotate(angle);
  ctx.scale(scaleX,1);
  if(scaleX>=0){
    ctx.drawImage(front,-front.width/2,-front.height/2);
  }else{
    ctx.drawImage(back,-back.width/2,-back.height/2);
  }
  ctx.setTransform(1,0,0,1,0,0);
}

function animate(time){
  draw(x,y,scaleX/100,angle);
  angle+=PI2/720;
  scaleX+=scaleDirection*scaleDelta;
  if(scaleX<-100 || scaleX>100){
    scaleDirection*=-1;
    scaleX+=scaleDirection*scaleDelta;
  }
  requestAnimationFrame(animate);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>

On the other hand...

You link to a page-turning demo--which is a totally different animal. If that's what your after Rick Barraza has done a nice writeup on how to do that here: http://rbarraza.com/html5-canvas-pageflip/

markE
  • 102,905
  • 11
  • 164
  • 176