HTML5・将棋(描画のみ)

将棋盤



将棋駒



後手の駒の向きは、上記のPNG画像をペイント等のソフトで180度反転させた画像として保存する。

駒の初期配置



駒の向きが分かりづらい為、ここでは、先手後手共に「玉将」で表示している。


お持ち帰りコーナー

「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。



ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5・将棋(描画のみ)</title>
<script language="JavaScript" type="text/javascript">
// グローバル変数
var cvs0, cvs1, cvs2; // canvas要素のオブジェクトを取得する為の変数
var cnt0, cnt1, cnt2; // コンテキストを取得する為の変数

window.onload = function(){
  drawboard();
  drawpiece();

  cvs2 = document.getElementById("initpos"); // canvas要素のオブジェクトを取得
  cnt2 = cvs2.getContext("2d"); // コンテキストを取得

  var png0 = new Image();
  png0.src = "board.png";
  png0.onload = function () {
    cnt2.drawImage(png0, 0, 0, 500, 500, 0, 0, 500, 500);
  };

  var png1 = new Image();
  png1.src = "piece.png";
  png1.onload = function () {
    cnt2.drawImage(png1, 0, 0, 50, 50, 5, 335, 50, 50); // 9七歩
    cnt2.drawImage(png1, 0, 0, 50, 50, 60, 335, 50, 50); // 8七歩
    cnt2.drawImage(png1, 0, 0, 50, 50, 115, 335, 50, 50); // 7七歩
    cnt2.drawImage(png1, 0, 0, 50, 50, 170, 335, 50, 50); // 6七歩
    cnt2.drawImage(png1, 0, 0, 50, 50, 225, 335, 50, 50); // 5七歩
    cnt2.drawImage(png1, 0, 0, 50, 50, 280, 335, 50, 50); // 4七歩
    cnt2.drawImage(png1, 0, 0, 50, 50, 335, 335, 50, 50); // 3七歩
    cnt2.drawImage(png1, 0, 0, 50, 50, 390, 335, 50, 50); // 2七歩
    cnt2.drawImage(png1, 0, 0, 50, 50, 445, 335, 50, 50); // 1七歩
    cnt2.drawImage(png1, 50, 0, 50, 50, 5, 445, 50, 50); // 9九香
    cnt2.drawImage(png1, 50, 0, 50, 50, 445, 445, 50, 50); // 1九香
    cnt2.drawImage(png1, 100, 0, 50, 50, 60, 445, 50, 50); // 8九桂
    cnt2.drawImage(png1, 100, 0, 50, 50, 390, 445, 50, 50); // 2九桂
    cnt2.drawImage(png1, 0, 50, 50, 50, 115, 445, 50, 50); // 7九銀
    cnt2.drawImage(png1, 0, 50, 50, 50, 335, 445, 50, 50); // 3九銀
    cnt2.drawImage(png1, 50, 50, 50, 50, 170, 445, 50, 50); // 6九金
    cnt2.drawImage(png1, 50, 50, 50, 50, 280, 445, 50, 50); // 4九金
    cnt2.drawImage(png1, 100, 50, 50, 50, 60, 390, 50, 50); // 8八角
    cnt2.drawImage(png1, 0, 100, 50, 50, 390, 390, 50, 50); // 2八飛
    cnt2.drawImage(png1, 100, 100, 50, 50, 225, 445, 50, 50); // 5九玉
  };

  var png2 = new Image();
  png2.src = "reverse.png";
  png2.onload = function () {
    cnt2.drawImage(png2, 100, 200, 50, 50, 5, 115, 50, 50); // 9三歩
    cnt2.drawImage(png2, 100, 200, 50, 50, 60, 115, 50, 50); // 8三歩
    cnt2.drawImage(png2, 100, 200, 50, 50, 115, 115, 50, 50); // 7三歩
    cnt2.drawImage(png2, 100, 200, 50, 50, 170, 115, 50, 50); // 6三歩
    cnt2.drawImage(png2, 100, 200, 50, 50, 225, 115, 50, 50); // 5三歩
    cnt2.drawImage(png2, 100, 200, 50, 50, 280, 115, 50, 50); // 4三歩
    cnt2.drawImage(png2, 100, 200, 50, 50, 335, 115, 50, 50); // 3三歩
    cnt2.drawImage(png2, 100, 200, 50, 50, 390, 115, 50, 50); // 2三歩
    cnt2.drawImage(png2, 100, 200, 50, 50, 445, 115, 50, 50); // 1三歩
    cnt2.drawImage(png2, 50, 200, 50, 50, 5, 5, 50, 50); // 9一香
    cnt2.drawImage(png2, 50, 200, 50, 50, 445, 5, 50, 50); // 1一香
    cnt2.drawImage(png2, 0, 200, 50, 50, 60, 5, 50, 50); // 8一桂
    cnt2.drawImage(png2, 0, 200, 50, 50, 390, 5, 50, 50); // 2一桂
    cnt2.drawImage(png2, 100, 150, 50, 50, 115, 5, 50, 50); // 7一銀
    cnt2.drawImage(png2, 100, 150, 50, 50, 335, 5, 50, 50); // 3一銀
    cnt2.drawImage(png2, 50, 150, 50, 50, 170, 5, 50, 50); // 6一金
    cnt2.drawImage(png2, 50, 150, 50, 50, 280, 5, 50, 50); // 4一金
    cnt2.drawImage(png2, 0, 150, 50, 50, 390, 60, 50, 50); // 2二角
    cnt2.drawImage(png2, 100, 100, 50, 50, 60, 60, 50, 50); // 8二飛
    cnt2.drawImage(png2, 0, 100, 50, 50, 225, 5, 50, 50); // 5一玉
  };

};

// 将棋盤を描画する関数
var drawboard = function(){
  cvs0 = document.getElementById("board"); // canvas要素のオブジェクトを取得
  cnt0 = cvs0.getContext("2d"); // コンテキストを取得

  cnt0.fillStyle = "#000000";
  cnt0.fillRect(0, 0, 500, 500);
  cnt0.fillStyle = "#ffd700";
  for(i=0;i<9;i++){
    for(j=0;j<9;j++){
      cnt0.fillRect(5+i*55, 5+j*55, 50, 50);
    }
  }
};

// 将棋駒を描画する関数
var drawpiece = function(){
  cvs1 = document.getElementById("piece"); // canvas要素のオブジェクトを取得
  cnt1 = cvs1.getContext("2d"); // コンテキストを取得

  cnt1.fillStyle = "#ffd700";
  cnt1.fillRect(0, 0, 150, 250);
  cnt1.font ="24pt 'メイリオ'";
  cnt1.textBaseline = "middle";
  cnt1.textAlign = "center";

  cnt1.fillStyle = "#000000";
  cnt1.fillText("歩",25,25);
  cnt1.fillText("香",75,25);
  cnt1.fillText("桂",125,25);
  cnt1.fillText("銀",25,75);
  cnt1.fillText("金",75,75);
  cnt1.fillText("角",125,75);
  cnt1.fillText("飛",25,125);
  cnt1.fillText("王",75,125);
  cnt1.fillText("玉",125,125);

  cnt1.fillStyle = "#ff0000";
  cnt1.fillText("と",25,175);
  cnt1.fillText("杏",75,175);
  cnt1.fillText("圭",125,175);
  cnt1.fillText("全",25,225);
  cnt1.fillText("馬",75,225);
  cnt1.fillText("龍",125,225);
};

// 将棋盤をPNG画像として保存する関数
var saveasPNGboard = function(){
  var png = cvs0.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};

// 将棋駒をPNG画像として保存する関数
var saveasPNGpiece = function(){
  var png = cvs1.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};

// 駒の初期配置をPNG画像として保存する関数
var saveasPNGinitpos = function(){
  var png = cvs2.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};
</script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>HTML5・将棋(描画のみ)</h1>
<h2>将棋盤</h2>
<canvas id="board" width="500" height="500"></canvas>
<br>
<input type="button" value="将棋盤をPNG画像として保存する" onclick="saveasPNGboard()">
<br>
<h2>将棋駒</h2>
<canvas id="piece" width="150" height="250"></canvas>
<br>
<input type="button" value="将棋駒をPNG画像として保存する" onclick="saveasPNGpiece()">
<br>
後手の駒の向きは、上記のPNG画像をペイント等のソフトで180度反転させた画像として保存する。
<br>
<h2>駒の初期配置</h2>
<canvas id="initpos" width="500" height="500"></canvas>
<br>
<input type="button" value="駒の初期配置をPNG画像として保存する" onclick="saveasPNGinitpos()">
<br>
駒の向きが分かりづらい為、ここでは、先手後手共に「玉将」で表示している。

<br><hr><br>

<h2>お持ち帰りコーナー</h2>
「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。<br>
<img id="newImg">

</div>

<br><hr><br>

</body>
</html>



Shadow Academy トップへ戻る

inserted by FC2 system