画扑克牌的JS库 - Poker.JS

JavaScript   2012-10-16 19:22:01 发布
您的评价:
     
4.7
收藏     2收藏
文件夹
标签
(多个标签用逗号分隔)

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

扩展阅读

ECMAScript5新JavaScript API入门
HTML5扑克牌:HTML5 Deck of Cards
JavaScript的数学库:Jmat.js
JavaScript的PSD解析库 psd.js
平滑的色彩过渡的JavaScript库:sweep.js

为您推荐

移动前端—图片压缩上传实践
Express入门教程:一个简单的博客
React 入门实例教程
HTML5 CSS3专题 纯CSS打造相册效果
使用 AngularJS 开发一个大规模的单页应用(SPA)

更多

JavaScript
JavaScript开发工具包
相关文档  — 更多
相关经验  — 更多
相关讨论  — 更多