HTML5のcanvas機能を利用した、基本的な機能について考察してみる。
HTML5のcanvas機能
PNG画像を保存する関数
直線を引く関数
カラー版直線を引く関数
三角形を描画する関数
カラー版三角形を描画する関数
三角形を塗りつぶす関数
カラー版三角形を塗りつぶす関数
JavaScriptのキーコード
<!DOCTYPE html> <html lang="ja"> <head> <meta name="robots" content="noindex,nofollow"> <meta charset="utf-8" /> <title>HTML5+JavaScriptによるRPG制作</title> <script language="JavaScript" type="text/javascript"> // グローバル変数 var canvas; // canvas要素のオブジェクトを取得する為の変数 var context; // コンテキストを取得する為の変数 window.onload = function(){ canvas = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得 context = canvas.getContext("2d"); // コンテキストを取得 context.fillStyle = "#808080"; // canvasの背景色(灰色)を指定 context.fillRect(0,0,640,480); // canvas全体を背景色の矩形で塗りつぶす }; </script> </head> <body bgcolor="#c0c0c0"> <div style="text-align:center;"> <h1>HTML5+JavaScriptによるRPG制作</h1> <canvas id="html5jsrpg" width="640" height="480"></canvas> </div> </body> </html> |
(解説) HTML5の雛形。今後は、ここに色々と追加・変更を加えていく。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>HTML5+JavaScriptによるRPG制作</title>
<script language="JavaScript" type="text/javascript">
// グローバル変数
var canvas; // canvas要素のオブジェクトを取得する為の変数
var context; // コンテキストを取得する為の変数
window.onload = function(){
canvas = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得
context = canvas.getContext("2d"); // コンテキストを取得
context.fillStyle = "#808080"; // canvasの背景色(灰色)を指定
context.fillRect(0,0,640,480); // canvas全体を背景色の矩形で塗りつぶす
var lattice = new Image();
lattice.src = "lattice.png";
lattice.onload = function () {
context.drawImage(lattice, 0, 0, 640, 480, 0, 0, 640, 480);
};
};
</script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>HTML5+JavaScriptによるRPG制作</h1>
<canvas id="html5jsrpg" width="640" height="480"></canvas>
</div>
</body>
</html>
|
(解説) 上記の雛形に、drawImageメソッドを用いて、背景画像を挿入したもの。
// PNG画像として保存 var saveasPNG = function(){ var png = canvas.toDataURL("image/png"); document.getElementById("newImg").src = png; }; |
(解説)
// 直線を引く関数 var drawLine = function(x0, y0, x1, y1){ canvas = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得 context = canvas.getContext("2d"); // コンテキストを取得 context.beginPath(); context.moveTo(x0,y0); context.lineTo(x1,y1); context.stroke(); }; |
(解説) 直線を引く関数。
// カラー版直線を引く関数 var drawColorLine = function(x0, y0, x1, y1, color){ canvas = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得 context = canvas.getContext("2d"); // コンテキストを取得 context.beginPath(); context.moveTo(x0,y0); context.lineTo(x1,y1); context.strokeStyle = color; context.stroke(); }; |
(解説) カラー版直線を引く関数。
// 三角形を描画する関数 var drawTriangle = function(x0, y0, x1, y1, x2, y2){ canvas = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得 context = canvas.getContext("2d"); // コンテキストを取得 context.beginPath(); context.moveTo(x0,y0); context.lineTo(x1,y1); context.lineTo(x2,y2); context.closePath(); context.stroke(); }; |
(解説) 三角形を描画する関数。
// カラー版三角形を描画する関数 var drawColorTriangle = function(x0, y0, x1, y1, x2, y2, color){ canvas = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得 context = canvas.getContext("2d"); // コンテキストを取得 context.beginPath(); context.moveTo(x0,y0); context.lineTo(x1,y1); context.lineTo(x2,y2); context.closePath(); context.strokeStyle = color; context.stroke(); }; |
(解説) カラー版三角形を描画する関数。
// 三角形を塗りつぶす関数 var fillTriangle = function(x0, y0, x1, y1, x2, y2){ canvas = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得 context = canvas.getContext("2d"); // コンテキストを取得 context.beginPath(); context.moveTo(x0,y0); context.lineTo(x1,y1); context.lineTo(x2,y2); context.closePath(); context.fill(); }; |
(解説) 三角形を塗りつぶす関数。
// カラー版三角形を塗りつぶす関数 var fillColorTriangle = function(x0, y0, x1, y1, x2, y2, color){ canvas = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得 context = canvas.getContext("2d"); // コンテキストを取得 context.beginPath(); context.moveTo(x0,y0); context.lineTo(x1,y1); context.lineTo(x2,y2); context.closePath(); context.fillStyle = color; context.fill(); }; |
(解説) カラー版三角形を塗りつぶす関数。
var keydownfunc = function( event ) { var code = event.keyCode; switch (code) { case 37: // ←キー event.preventDefault(); ; break; case 38: // ↑キー event.preventDefault(); ; break; case 39: // →キー event.preventDefault(); ; break; case 40: // ↓キー event.preventDefault(); ; break; case 48: // 0キー event.preventDefault(); ; break; case 49: // 1キー event.preventDefault(); ; break; case 50: // 2キー event.preventDefault(); ; break; case 51: // 3キー event.preventDefault(); ; break; case 52: // 4キー event.preventDefault(); ; break; case 53: // 5キー event.preventDefault(); ; break; case 54: // 6キー event.preventDefault(); ; break; case 55: // 7キー event.preventDefault(); ; break; case 56: // 8キー event.preventDefault(); ; break; case 57: // 9キー event.preventDefault(); ; break; case 65: // aキー event.preventDefault(); ; break; case 66: // bキー event.preventDefault(); ; break; case 67: // cキー event.preventDefault(); ; break; case 68: // dキー event.preventDefault(); ; break; case 69: // eキー event.preventDefault(); ; break; case 70: // fキー event.preventDefault(); ; break; case 71: // gキー event.preventDefault(); ; break; case 72: // hキー event.preventDefault(); ; break; case 73: // iキー event.preventDefault(); ; break; case 74: // jキー event.preventDefault(); ; break; case 75: // kキー event.preventDefault(); ; break; case 76: // lキー event.preventDefault(); ; break; case 77: // mキー event.preventDefault(); ; break; case 78: // nキー event.preventDefault(); ; break; case 79: // oキー event.preventDefault(); ; break; case 80: // pキー event.preventDefault(); ; break; case 81: // qキー event.preventDefault(); ; break; case 82: // rキー event.preventDefault(); ; break; case 83: // sキー event.preventDefault(); ; break; case 84: // tキー event.preventDefault(); ; break; case 85: // uキー event.preventDefault(); ; break; case 86: // vキー event.preventDefault(); ; break; case 87: // wキー event.preventDefault(); ; break; case 88: // xキー event.preventDefault(); ; break; case 89: // yキー event.preventDefault(); ; break; case 90: // zキー event.preventDefault(); ; break; } }; |
(解説) window.onload = function(){}の中に、
「window.addEventListener('keydown',keydownfunc,true);」
を記述
<input type="button" value="←" style="width:40px;height:40px" onclick="()"> <input type="button" value="↑" style="width:40px;height:40px" onclick="()"> <input type="button" value="→" style="width:40px;height:40px" onclick="()"> <input type="button" value="↓" style="width:40px;height:40px" onclick="()"> <input type="button" value="0" style="width:40px;height:40px" onclick="()"> <input type="button" value="1" style="width:40px;height:40px" onclick="()"> <input type="button" value="2" style="width:40px;height:40px" onclick="()"> <input type="button" value="3" style="width:40px;height:40px" onclick="()"><br> <input type="button" value="4" style="width:40px;height:40px" onclick="()"> <input type="button" value="5" style="width:40px;height:40px" onclick="()"> <input type="button" value="6" style="width:40px;height:40px" onclick="()"> <input type="button" value="7" style="width:40px;height:40px" onclick="()"> <input type="button" value="8" style="width:40px;height:40px" onclick="()"> <input type="button" value="9" style="width:40px;height:40px" onclick="()"> <input type="button" value="A" style="width:40px;height:40px" onclick="()"> <input type="button" value="B" style="width:40px;height:40px" onclick="()"><br> <input type="button" value="C" style="width:40px;height:40px" onclick="()"> <input type="button" value="D" style="width:40px;height:40px" onclick="()"> <input type="button" value="E" style="width:40px;height:40px" onclick="()"> <input type="button" value="F" style="width:40px;height:40px" onclick="()"> <input type="button" value="G" style="width:40px;height:40px" onclick="()"> <input type="button" value="H" style="width:40px;height:40px" onclick="()"> <input type="button" value="I" style="width:40px;height:40px" onclick="()"> <input type="button" value="J" style="width:40px;height:40px" onclick="()"><br> <input type="button" value="K" style="width:40px;height:40px" onclick="()"> <input type="button" value="L" style="width:40px;height:40px" onclick="()"> <input type="button" value="M" style="width:40px;height:40px" onclick="()"> <input type="button" value="N" style="width:40px;height:40px" onclick="()"> <input type="button" value="O" style="width:40px;height:40px" onclick="()"> <input type="button" value="P" style="width:40px;height:40px" onclick="()"> <input type="button" value="Q" style="width:40px;height:40px" onclick="()"> <input type="button" value="R" style="width:40px;height:40px" onclick="()"><br> <input type="button" value="S" style="width:40px;height:40px" onclick="()"> <input type="button" value="T" style="width:40px;height:40px" onclick="()"> <input type="button" value="U" style="width:40px;height:40px" onclick="()"> <input type="button" value="V" style="width:40px;height:40px" onclick="()"> <input type="button" value="W" style="width:40px;height:40px" onclick="()"> <input type="button" value="X" style="width:40px;height:40px" onclick="()"> <input type="button" value="Y" style="width:40px;height:40px" onclick="()"> <input type="button" value="Z" style="width:40px;height:40px" onclick="()"> |
(解説)
<form><!-- getElementByIdを使用する為、name属性を指定しない --> <textarea id="saveload" cols="40" rows="10"></textarea><!-- セーブ/ロード用のテキストエリア名は、「saveload」 --> <br><hr><br> <input type="button" value="セーブ" style="width:80px;height:40px" onclick="()"> <input type="button" value="ロード" style="width:80px;height:40px" onclick="()"> <input type="button" value="PNG画像を保存する" style="width:160px;height:40px" onclick="saveasPNG()"> </form> <br><hr><br> <h2>お持ち帰りコーナー</h2> 「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。<br> <table border="5" style="margin-left:auto;margin-right:auto;text-align:center;"> <tr> <td style="text-align:center;width:640px;height:480px;"><img id="newImg"></td> </tr> </table> |
(解説) デバッグ用途にも利用可能。
(解説)
(解説)
<!DOCTYPE html> <html lang="ja"> <head> <meta name="robots" content="noindex,nofollow"> <meta charset="utf-8" /> <title>HTML5+JavaScriptによるRPG制作</title> <script language="JavaScript" type="text/javascript"> // グローバル変数 var canvas1, canvas2; // canvas要素のオブジェクトを取得する為の変数 var context1, context2; // コンテキストを取得する為の変数 window.onload = function(){ canvas1 = document.getElementById("background"); // canvas要素のオブジェクトを取得 context1 = canvas1.getContext("2d"); // コンテキストを取得 context1.fillStyle = "#808080"; // canvasの背景色(灰色)を指定 context1.fillRect(0,0,640,480); // canvas全体を背景色の矩形で塗りつぶす var lattice = new Image(); lattice.src = "lattice.png"; lattice.onload = function () { context1.drawImage(lattice, 0, 0, 640, 480, 0, 0, 640, 480); }; canvas2 = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得 context2 = canvas2.getContext("2d"); // コンテキストを取得 context2.fillStyle = "#808080"; // canvasの背景色(灰色)を指定 context2.fillRect(0,320,640,160); // canvas全体を背景色の矩形で塗りつぶす }; </script> </head> <body bgcolor="#c0c0c0" style="margin-left:auto;margin-right:auto;text-align:center;"> <div style="text-align:center;"> <h1>HTML5+JavaScriptによるRPG制作</h1> <canvas id="background" style="position:absolute; left:360px; top:80px; z-index:1" width="640" height="480"></canvas> <canvas id="html5jsrpg" style="position:absolute; left:360px; top:80px; z-index:2" width="640" height="480"></canvas> </div> </body> </html> |
(解説) 上記にcanvasレイヤーと背景画像の読み込みを追加したもの。
PNG画像として保存する機能との両立が難しいため、保留。