画扑克牌的JS库 - Poker.JS

jopen 11年前

Poker.JS是通过扩展HTML5 Canvas实现的画扑克牌的JS库。用户可以很容易地在img或canvas创建单个的扑克牌，或者直接在大canvas里画牌。

  • 不使用外部图片
  • 10K大小(Gzip后4.3K)
  • 矢量绘制，大小都清晰
  • 生成扑克牌DOM对象
  • 或直接画在Canvas里
演示: 演示1 演示2

 

使用方法

首先，加载 poker.js

<script src="poker.min.js"></script>

接下去你可以从3种方法里选择一种来创建牌

方法1，创建DOM元素

调用 Poker.getCardImage 或 Poker.getCardCanvas 来获取 <img> 或 <canvas> 元素

//在body末尾插入一个<img>  document.body.appendChild(Poker.getCardImage(60,'hearts','q'));  //在body末尾插入一个<canvas>  document.body.appendChild(Poker.getCardCanvas(60,'hearts','q'));

方法2，获取base64的png图像数据

调用 Poker.getCardData 来获取数据

//获取图像数据并且存储在变量pokerHQ里 var pokerHQ = Poker.getCardData(60,'hearts','q');

方法3，在你自己的canvas里画牌

在DOM里添加你自己的canvas容器

<canvas id="myowncanvas" width="1280" height="720"></canvas>

取得canvas的2d对象，在里面画牌

var canvas = document.getElementById('myowncanvas').getContext('2d');  canvas.drawPokerCard(10, 10, 120, 'hearts', '6');

方法和参数



项目主页：http://www.open-open.com/lib/view/home/1350386337664