[編集モード] トランプ(playing card)の１枚絵生成

部分描画で使用するためのトランプの１枚絵を生成します。絵札とジョーカーの画像は未実装。プログラムのライセンスはCC0ですが、生成された画像を動的に使わない場合、画像はその時に使用している絵文字のフォントのライセンスが絡むので要注意。

カード情報は{
　角半径:5,
　幅:100,
　高:140,
　枠:16
}

スート情報は[
　{名前:"", 色:青色, 文字:""},
　{名前:"スペード", 色:黒色, 文字:"♠"},
　{名前:"クラブ", 色:黒色, 文字:"♣"},
　{名前:"ダイヤ", 色:赤色, 文字:"♦"},
　{名前:"ハート", 色:赤色, 文字:"♥"}
　{名前:"黒JK", 色:黒色, 文字:""},
　{名前:"赤JK", 色:赤色, 文字:""},
]

ランク情報は[
　{名前:"", NO:0, 画像:"" },
　{名前:"A", NO:1, 反転: 14, マーク:[[2,2.5]] },
　{名前:"2", NO:2, 反転: 2, マーク:[[2,1],[2,4]] },
　{名前:"3", NO:3, 反転: 3, マーク:[[2,1],[2,2.5],[2,4]] },
　{名前:"4", NO:4, 反転: 3, マーク:[[1,1],[3,1],[1,4],[3,4]] },
　{名前:"5", NO:5, 反転: 3, マーク:[[1,1],[3,1],[2,2.5],[1,4],[3,4]] },
　{名前:"6", NO:6, 反転: 5, マーク:[[1,1],[3,1],[1,2.5],[3,2.4],[1,4],[3,4]] },
　{名前:"7", NO:7, 反転: 6, マーク:[[1,1],[3,1],[1,2.5],[2,2],[3,2.5],[1,4],[3,4]] },
　{名前:"8", NO:8, 反転: 5, マーク:[[1,1],[3,1],[1,2],[3,2],[1,3],[3,3],[1,4],[3,4]] },
　{名前:"9", NO:9, 反転: 6, マーク:[[1,1],[3,1],[1,2],[3,2],[2,2.5],[1,3],[3,3],[1,4],[3,4]] },
　{名前:"10", NO:10, 反転: 6, マーク:[[1,1],[1,2],[3,1],[3,2],[2,1.5],[2,3.5],[1,3],[1,4],[3,3],[3,4]] },
　{名前:"J", NO:11, 画像:"" },
　{名前:"Q", NO:12, 画像:"" },
　{名前:"K", NO:13, 画像:"" },
　{名前:"JK", NO:14, 画像:"" },
]

●全カード表示とは
　画面横は描画中キャンバス["width"]
　画面縦は描画中キャンバス["height"]
　[0, 0, 画面横, 画面縦]に描画クリア
　４回、
　　スートは回数
　　１３回、
　　　ランクは回数
　　　スートのランクを[(ランク-1)*カード情報["幅"],(スート-1)*カード情報["高"]]にカード表示
　　ここまで
　ここまで
　0の0を[13*カード情報["幅"],0*カード情報["高"]]にカード表示
　5の14を[13*カード情報["幅"],1*カード情報["高"]]にカード表示
　6の14を[13*カード情報["幅"],2*カード情報["高"]]にカード表示
ここまで

●(スートのランクを位置に)カード表示とは
　Xは位置[0]
　Yは位置[1]
　Rはカード情報["角半径"]
　Wはカード情報["幅"]
　Hはカード情報["高"]
　PIは"Math.PI"をJS実行
　CTXは描画中コンテキスト

# カードの枠線を表示
　黒色に線色設定
　白色に塗り色設定
　CTXの"beginPath"を[]でJSメソッド実行
　CTXの"arc"を[X+R+0.5, Y+R+0.5, R, PI, 3*PI/2, 0]でJSメソッド実行
　CTXの"arc"を[X+W-R-0.5, Y+R+0.5, R, 3*PI/2, 0, 0]でJSメソッド実行
　CTXの"arc"を[X+W-R-0.5, Y+H-R-0.5, R, 0, PI/2, 0]でJSメソッド実行
　CTXの"arc"を[X+R+0.5, Y+H-R-0.5, R, PI/2, PI, 0]でJSメソッド実行
　CTXの"closePath"を[]でJSメソッド実行
　CTXの"fill"を[]でJSメソッド実行
　CTXの"stroke"を[]でJSメソッド実行

# 以降共通となる色の設定
　スート情報[スート]["色"]に塗り色設定
　スート情報[スート]["色"]に線色設定

# カード角のランクとスートを表示
　描画中コンテキスト["textAlign"]は"center"
　描画中コンテキスト["textBaseline"]は"middle"
　もし、((ランク情報[ランク]["名前"]の文字数)＞０)｜｜((スート情報[スート]["文字"]の文字数)＞０)ならば、
　　キャンバス状態保存
　　CTXの"translate"を[X+カード情報["枠"]/2, Y+カード情報["枠"]+カード情報["枠"]*0.4]でJSメソッド実行
　　もし、(ランク情報[ランク]["名前"]の文字数)≦１ならば、
　　　「{カード情報["枠"]*0.8}px sans-serif」に描画フォント設定
　　違えば、
　　　「{カード情報["枠"]*0.6}px sans-serif」に描画フォント設定
　　　CTXの"scale"を[1.0, 0.8/0.6]でJSメソッド実行
　　ここまで
　　[0, 0]にランク情報[ランク]["名前"]を文字描画
　　キャンバス状態復元
　　「{カード情報["枠"]*0.8}px sans-serif」に描画フォント設定
　　[X+カード情報["枠"]/2, Y+カード情報["枠"]+カード情報["枠"]*1.2]にスート情報[スート]["文字"]を文字描画
　　キャンバス状態保存
　　CTXの"translate"を[X+カード情報["幅"]-カード情報["枠"]/2, Y+カード情報["高"]-カード情報["枠"]-カード情報["枠"]*0.4]でJSメソッド実行
　　CTXの"rotate"を[PI]でJSメソッド実行
　　もし、(ランク情報[ランク]["名前"]の文字数)≦１ならば、
　　　「{カード情報["枠"]*0.8}px sans-serif」に描画フォント設定
　　違えば、
　　　「{カード情報["枠"]*0.6}px sans-serif」に描画フォント設定
　　　CTXの"scale"を[1.0, 0.8/0.6]でJSメソッド実行
　　ここまで
　　[0, 0]にランク情報[ランク]["名前"]を文字描画
　　キャンバス状態復元
　　キャンバス状態保存
　　「{カード情報["枠"]*0.8}px sans-serif」に描画フォント設定
　　CTXの"translate"を[X+カード情報["幅"]-カード情報["枠"]/2, Y+カード情報["高"]-カード情報["枠"]-カード情報["枠"]*1.2]でJSメソッド実行
　　CTXの"rotate"を[PI]でJSメソッド実行
　　[0, 0]にスート情報[スート]["文字"]を文字描画
　　キャンバス状態復元
　ここまで

# カードの内枠の線を表示（確認用）
　もし、(ランク情報[ランク]["マーク"]の変数型確認)＝"undefined"ならば、
　　キャンバス状態保存
　　空に塗り色設定
　[X+カード情報["枠"], Y+カード情報["枠"], カード情報["幅"]-カード情報["枠"]*2, カード情報["高"]-カード情報["枠"]*2]へ四角描画
　　キャンバス状態復元
　ここまで

# カード内容のマークを表示
　もし、(ランク情報[ランク]["画像"]の変数型確認)≠"undefined"ならば、
　　# カード内容は画像のURLから画像を表示
　　もし、ランク＝０ならば、
　　　# 裏側だけなんか描く
　　　キャンバス状態保存
　　　　青色に線色設定
　　　　水色に塗り色設定
　　　　[X+カード情報["枠"], Y+カード情報["枠"], カード情報["幅"]-カード情報["枠"]*2, カード情報["高"]-カード情報["枠"]*2]へ四角描画
　　　キャンバス状態復元
　　ここまで
　違えば、
　　# カード内容はマークのリストからマークを表示
　　マークリストはランク情報[ランク]["マーク"]
　　マーク数はマークリストの配列要素数
　　もし、マーク数＞０ならば、
　　　列幅は(カード情報["幅"]-カード情報["枠"]*2)/3
　　　行高は(カード情報["高"]-カード情報["枠"]*2)/4
　　　「{列幅}px sans-serif」に描画フォント設定
　　　描画中コンテキスト["textAlign"]は"center"
　　　描画中コンテキスト["textBaseline"]は"middle"
　　　(マーク数)回、
　　　　マークはマークリスト[回数-1]
　　　　MXはマーク[0]*列幅-列幅/2
　　　　MYはマーク[1]*行高-行高/2
　　　　キャンバス状態保存
　　　　CTXの"translate"を[X+MX+カード情報["枠"], Y+MY+カード情報["枠"]]でJSメソッド実行
　　　　もし、回数≧ランク情報[ランク]["反転"]ならば、
　　　　　CTXの"rotate"を[PI]でJSメソッド実行
　　　　ここまで
　　　　[0, 0]にスート情報[スート]["文字"]を文字描画
　　　　キャンバス状態復元
　　　ここまで
　　ここまで
　ここまで
ここまで

描画中キャンバス["width"]は14*カード情報["幅"]
描画中キャンバス["height"]は4*カード情報["高"]
全カード表示

デバッグキャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] トランプ(playing card)の１枚絵生成

素材のアップロード