▶ 実 行
▶ 実行
クリア
トランプ(playing card)の１枚絵生成
by てぃふと@うぇいく
カード情報は{ 角半径: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*カード情報["高"] 全カード表示