gpt4 book ai didi

javascript - HTML5 Canvas 翻转卡片动画

转载 作者:行者123 更新时间:2023-12-02 16:22:34 56 4
gpt4 key购买 nike

我正在尝试通过在 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

任何人有任何关于如何做到这一点的想法都会有很大的帮助

提前致谢

这是当前的演示 http://sopronioli713.github.io/test/

最佳答案

这是一个基于 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/

56 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com