Poker.JS is a JS lib extend HT

Chinese version readme 中文版本读我文档

Demo: https://tairraos.github.io/Poker.JS/

First, load poker.js:

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

Then there have 3 ways to create card by your choice

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

//在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"/> 取得canvas的2d对象，在里面画牌

var canvas = document.getElementById('myowncanvas').getContext('2d'); canvas.drawPokerCard(10, 10, 120, 'hearts', '6'); 方法和参数 画牌面 方法

Poker.getCardImage (size, suit, point) Poker.getCardCanvas (size, suit, point) Poker.getCardData (size, suit, point) canvas.drawPokerCard (x, y, size, suit, point) 参数

x, y - 牌的左上角在Canvas里的坐标。缺省值为0, 0。 size - 牌的象素高度。牌的宽高比固定为3:4。缺省值为200。 suit - 牌面花色。取值大小写不敏感，必须为下列[]内的值之一： ['h', 'hearts', 'd', 'diamonds', 's', 'spades', 'c', 'clubs'] 值对应红桃，方块，黑桃，梅花, 'h', 'd', 's', 'c' 是缩略写法 当牌面点数为'JOKER'时，红桃和方块表示牌为大王；黑桃和梅花表示牌为小王。 缺省值为'h' point - 牌面点数。取值大小写不敏感，必须为下列[]内的值之一： ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K', 'O', 'JOKER'] 'O'(字母O)是'JOKER'的缩略写法 缺省值为'O' 例子

document.body.appendChild(Poker.getCardCanvas(100, 'hearts', 'Q')); canvas.drawPokerCard (0, 400, 100, 'hearts', 'joker'); canvas.drawPokerCard (0, 400, 100, 'hearts', 'Q'); 画牌背 方法

Poker.getBackImage (size[, foregroundColor, backgroundColor]) Poker.getBackCanvas (size[, foregroundColor, backgroundColor]) Poker.getBackData (size[, foregroundColor, backgroundColor]) canvas.drawPokerBack (x, y, size[, foregroundColor, backgroundColor]]) 参数

x, y - 牌的左上角在Canvas里的坐标。缺省值为0, 0。 size - 牌的象素高度。牌的宽高比固定为3:4。缺省值为200。 foregroundColor - 前景色。缺省值为'#BB5555'。 backgroundColor - 背景色。缺省值为'#AA2222'。 例子

document.body.appendChild(Poker.getBackCanvas(300, '#7A7BB8', '#2E319C')); canvas.drawPokerBack (10, 10, 300, '#b55', '#a22') canvas.drawPokerBack (375, 400, 100, '#7A7BB8', '#2E319C');