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画像として保存する機能との両立が難しいため、保留。