js实现canvas扑克牌纸牌旋转铺开动画效果代码

代码语言:html

所属分类:动画

代码描述:js实现canvas扑克牌纸牌旋转铺开动画效果代码

代码标签: 扑克牌 纸牌 旋转 铺开 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            background: #222;
            margin: 0;
            overflow: hidden
        }

        canvas {
            background: #FFF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%)
        }
    </style>
</head>
<body>

    <canvas id="c" width="1920" height="1080"></canvas>
        <script>
// Dwitter Shim by Frank Force 2020
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

function u(t) { // dwitter code goes here

onclick=_=>suffle=1
t?0:onclick()

if (suffle)
{
  c.width|=0
  suffle=0;
  x.fillStyle='#335'
  x.fillRect(0,0,2e3,2e3)
  x.font='1in"'
  x.fillStyle='#FFF'
  x.fillText('Click To Shuffle',30,100)
  A=[]
  for(i=62;i--;)
    if (i%16-11&&i%16<14)
      A.splice((A.length+1)*Math.random(),0,i)

  x.font='14em"'
  x.lineWidth=6;
  x.scale(1.5,1.5)
  x.translate(630,180)
 }

i++
if (i>51)
	return;
x.rotate(4*Math.PI/52),
x.translate(48-i*1,0),
x.fillStyle='#EEE',
X=-120,Y=30,
x.fillRect(X+7,Y-181,136,206),
x.fillStyle=A[i]%64<14||A[i]%64>45?'#000'.........完整代码请登录后点击上方下载按钮下载查看

网友评论0