ローカル上のファイルのみ以下の現象が発生。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> |