我正在尝试通过在 Canvas 中绘制来使用 html Canvas 创建翻转卡效果。
不需要 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>
我想要达到的效果就是使用 Canvas
http://www.turnjs.com/#samples/steve-jobs/10
任何人有任何关于如何做到这一点的想法都会有很大的帮助
提前致谢
最佳答案
这是一个基于 Canvas 的卡片翻转(带有旋转)，是我不久前为了好玩而做的。
它的工作原理是仅在 X 方向上缩放，使卡片看起来像是在翻转。
有关效果的注释:
如果不需要，您可以省略轮换。
此效果会在缩放(翻转)之前转换为卡片的水平中心，从而使卡片“旋转”。如果您想要“庄家翻转”，那么您可以将其平移到卡片的边缘。
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>另一方面...
您链接到一个令人翻页的演示——这是一个完全不同的动物。如果这就是您的需求，Rick Barraza 在这里写了一篇关于如何做到这一点的精彩文章:http://rbarraza.com/html5-canvas-pageflip/
关于javascript - HTML5 Canvas 翻转卡片动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28989493/