ローカル上のファイルのみ以下の現象が発生。Chrome、Firefox、及び、Edgeでは、
onloadメソッド内に書かれた、drawImageメソッドと「PNG画像を保存する」が
併用できなくなっていたため、「駒の初期配置をPNG画像として保存する」ことができない。
Webサーバ上にアップロードされたページ、及び、ローカル上のファイルであっても、
IEでは、上記の機能を使用できた。Webブラウザのセキュリティ面でのアップデートに
起因すると思われるが、詳細な理由は不明。
<!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>
|