Poker.js

Poker.JS is a JS lib extend HTML5 canvas to draw vector poker card

Poker.JS是通过扩展HTML5 Canvas实现的矢量扑克牌的JS库

Poker.JS

Chinese version readme 中文版本读我文档

Poker.JS is a JS lib extend HTML5 canvas to draw poker card. User should easy to create single poker card via img or canvas, or draw card in big canvas.

Demo: Demo1 Demo2


Usage

First, load poker.js:

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

Then there have 3 ways to create card by your choice

Way 1, Create DOM element

Call Poker.getCardImage or Poker.getCardCanvas to get or element

//insert a <img> to the end of body
document.body.appendChild(Poker.getCardImage(60,'hearts','q'));
//insert a <canvas> to the end of body
document.body.appendChild(Poker.getCardCanvas(60,'hearts','q'));

Way 2, Get base64 png image data

Call Poker.getCardData to get image data

//get image data and store in variable pokerHQ
var pokerHQ = Poker.getCardData(60,'hearts','q');

Way 3, Draw card in your own canvas

Add your own canvas to DOM

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

Get canvas 2d object and draw card

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

Methods and parameters

Draw card number side

Method

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

Parameters

x, y  - The x, y coordinate of top left corner of card in canvas.
        Default value is 0, 0.
size  - Height pixel of card.
        The ratio of card width and height is fixed to 3:4.
        Default value is 200.
suit  - Poker suit. Value is case insensitive and should be one of below:
        ['h', 'hearts', 'd', 'diamonds', 's', 'spades', 'c', 'clubs']
        'h', 'd', 's', 'c' are abbreviation
        For joker, 'h' & 'd' means big joker, 's' & 'c' means little joker.
        Default value is 'h'.
point - Card point. Value is case insensitive and should be one of below:
        ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K', 'O', 'JOKER']
        'O'(letter O) is abbreviation of 'JOKER'
        Default value is 'O'.

Example

document.body.appendChild(Poker.getCardCanvas(100, 'hearts', 'Q'));
canvas.drawPokerCard (0, 400, 100, 'hearts', 'joker');
canvas.drawPokerCard (0, 400, 100, 'hearts', 'Q');

Draw card back side

Method

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

Parameters

x, y            - The x, y coordinate of top left corner of card in canvas.
                  Default value is 0, 0.
size            - Height pixel of card.
                  The ratio of card width and height is fixed to 3:4.
                  Default value is 200.
foregroundColor - Foreground color. Default value is '#BB5555'.
backgroundColor - Background color. Default value is '#AA2222'.

Example

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

Chinese version readme 中文版本读我文档

Poker.JS

English version readme 英文版本读我文档

Poker.JS是通过扩展HTML5 Canvas实现的画扑克牌的JS库。用户可以很容易地在img或canvas创建单个的扑克牌，或者直接在大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');

方法和参数

画牌面

方法

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');