Javascript HTML5画布翻转卡动画_Javascript_Html_Html5 Canvas_Phaser Framework_Turnjs

Javascript HTML5画布翻转卡动画

javascript html html5-canvas

Javascript HTML5画布翻转卡动画,javascript,html,html5-canvas,phaser-framework,turnjs,Javascript,Html,Html5 Canvas,Phaser Framework,Turnjs,我试图通过在画布中绘制来使用html画布创建翻转卡片效果不需要ccs3技巧。它应该以一种本土的方式进行这是我使用phaser.js通过更改比例进行的初始测试 <html> <head> </head> <body> <div id="game_canvas"> </div> <script src = "jquery.min.js"></sc

我试图通过在画布中绘制来使用html画布创建翻转卡片效果

不需要ccs3技巧。它应该以一种本土的方式进行

这是我使用phaser.js通过更改比例进行的初始测试

<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>


var博弈；
雪碧；
$（文档）.ready（函数（）{
game=新的Phaser.game（640480，Phaser.AUTO，“game_canvas”{
预加载：预加载，
创建：创建，
更新：更新
});
函数预加载（）{
game.load.image（'card'，'download.png'）；
}
函数create（）{
这个延迟=1000；
this.spawn=0；
sprite=game.add.sprite（game.width/4，game.height/4，'card'）；
}
函数更新（）{
log（this.spawn>game.time.now）；
如果（this.spawn>game.time.now）{
返回；
}
this.spawn=game.time.now+this.delay；
sprite.scale.x*=-1；
}
});

我想用画布来达到这样的效果

任何人知道怎么做都会帮上大忙

提前谢谢

这是当前的演示

这是一个基于画布的卡片翻转（带旋转），我前一阵子为了好玩做的

它的工作原理是仅沿X方向缩放，使卡看起来像是在翻转

有关效果的说明：

如果不需要旋转，可以省略旋转

这种效果会在缩放（翻转）之前转化为卡牌的水平中心，从而使卡牌“旋转”。如果你想要一个“经销商翻转”，那么你会转换到卡片的边缘

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var x=150；
变量y=150；
var-scaleX=100；
var角=0；
var scaleDirection=-1；
var scaleDelta=1；
var PI2=数学PI*2；
var backCanvas=document.createElement（'canvas'）；
var backCtx=backCanvas.getContext（'2d'）；
var imgCount=2；
var front=新图像（）；前部。onload=启动；front.src=”https://dl.dropboxusercontent.com/u/139992952/multple/kingcard.png";
var back=新图像（）；back.onload=启动；back.src=”https://dl.dropboxusercontent.com/u/139992952/multple/kingcardback.png";
函数start（）{
如果（--imgCount>0）{return；}
制作动画（）；
}
函数绘制（x、y、scaleX、角度）{
ctx.clearRect（0,0，cw，ch）；
ctx.translate（x，y）；
ctx.旋转（角度）；
ctx.刻度（scaleX，1）；
如果（scaleX>=0）{
ctx.drawImage（前、前、宽/2、前、高/2）；
}否则{
ctx.drawImage（背面，-背面.宽度/2，-背面.高度/2）；
}
setTransform（1,0,0,1,0,0）；
}
函数动画（时间）{
绘制（x，y，scaleX/100，角度）；
角度+=PI2/720；
scaleX+=scaleDirection*scaleDelta；
if（scaleX100）{
scaleDirection*=-1；
scaleX+=scaleDirection*scaleDelta；
}
请求动画帧（动画）；
}

body{背景色：象牙；}
#画布{边框：1px纯红；}

这是一个基于画布的卡片翻转（带旋转），我前阵子为了好玩而做的

它的工作原理是仅沿X方向缩放，使卡看起来像是在翻转

有关效果的说明：

如果不需要旋转，可以省略旋转

这种效果会在缩放（翻转）之前转化为卡牌的水平中心，从而使卡牌“旋转”。如果你想要一个“经销商翻转”，那么你会转换到卡片的边缘

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var x=150；
变量y=150；
var-scaleX=100；
var角=0；
var scaleDirection=-1；
var scaleDelta=1；
var PI2=数学PI*2；
var backCanvas=document.createElement（'canvas'）；
var backCtx=backCanvas.getContext（'2d'）；
var imgCount=2；
var front=新图像（）；前部。onload=启动；front.src=”https://dl.dropboxusercontent.com/u/139992952/multple/kingcard.png";
var back=新图像（）；back.onload=启动；back.src=”https://dl.dropboxusercontent.com/u/139992952/multple/kingcardback.png";
函数start（）{
如果（--imgCount>0）{return；}
制作动画（）；
}
函数绘制（x、y、scaleX、角度）{
ctx.clearRect（0,0，cw，ch）；
ctx.translate（x，y）；
ctx.旋转（角度）；
ctx.刻度（scaleX，1）；
如果（scaleX>=0）{
ctx.drawImage（前、前、宽/2、前、高/2）；
}否则{
ctx.drawImage（背面，-背面.宽度/2，-背面.高度/2）；
}
setTransform（1,0,0,1,0,0）；
}
函数动画（时间）{
绘制（x，y，scaleX/100，角度）；
角度+=PI2/720；
scaleX+=scaleDirection*scaleDelta；
if（scaleX100）{
scaleDirection*=-1；
scaleX+=scaleDirection*scaleDelta；
}
请求动画帧（动画）；
}

body{背景色：象牙；}
#画布{边框：1px纯红；}

这是一个基于画布的卡片翻转（带旋转），我前阵子为了好玩而做的

它的工作原理是仅沿X方向缩放，使卡看起来像是在翻转

有关效果的说明：

如果不需要旋转，可以省略旋转

这种效果会在缩放（翻转）之前转化为卡牌的水平中心，从而使卡牌“旋转”。如果你想要一个“经销商翻转”，那么你会转换到卡片的边缘

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var x=150；
变量y=150；
var-scaleX=100；
var角=0；
var scaleDirection=-1；
var scaleDelta=1；
var PI2=数学PI*2；
var backCanvas=document.createElement（'canvas'）；
var backCtx=backCanvas.getContext（'2d'）；
var imgCount=2；
var front=新图像（）；前部。onload=启动；front.src=”https://dl.dropboxusercontent.com/u/139992952/multple/kingcard.png";
弗吉尼亚州