画扑克牌的JS库 - Poker.JS
Poker.JS是通过扩展HTML5 Canvas实现的画扑克牌的JS库。用户可以很容易地在img或canvas创建单个的扑克牌,或者直接在大canvas里画牌。
- 不使用外部图片
- 10K大小(Gzip后4.3K)
- 矢量绘制,大小都清晰
- 生成扑克牌DOM对象
- 或直接画在Canvas里
使用方法
首先,加载 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');
方法和参数
本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!