[目次]
FORMでテキスト入力 | Webプログラミング!(2021年度)
Canvasによるアニメーションの基本
- setInterval(描画関数名,時間(ミリ秒)) により, 一定間隔で呼び出す関数を指定できる
- 描画関数では, 画面クリア, 描画, 時刻のインクリメントを行う
サンプル1
サンプル1index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Canvasのアニメーションのテスト</title>
<script type="text/javascript" src="paintcanvas.js"></script>
<script type="text/javascript">
window.onload = function (){
var c=document.querySelector('#canvas-id1');
paintCanvas(c);
}
</script>
</head>
<body>
<h1>Canvasのテスト</h1>
<form>
<input type="text" id="t1"/>
<input type="text" id="t2"/>
<select id="s1">
<option value="1">いち</option>
<option value="2">に</option>
<option value="3">さん</option>
<option value="4">し</option>
</select>
<input type="button" id="b1" name="button1" value="送信"/>
</form>
<canvas id="canvas-id1" width="400" height="320">対応していないときに表示される文字列</canvas>
</body>
</html>
paintcanvas.js
function paintCanvas(c){
// 決まり文句
var ct=c.getContext('2d');
// 画像を保持するためのオブジェクト
var cat=new Image();
// ゲームの(画面の)状態を指定する変数の組
var x=10;
var y=20;
var dx=2;
var dy=2;
var size=1;
var x1=100;
var y1=100;
var dx1=10;
var dy1=10;
var size1=1;
//
var message="";
var message2="";
// 一定間隔で自動的に行うこと
function update(){
x1+=dx1*(Math.random()*2-1);
y1+=dy1*(Math.random()*2-1);
drawCanvas();
}
// キー入力に応じて行うこと
function eventKeyPressed(e){
var letterPressed = String.fromCharCode(e.keyCode);
letterPressed = letterPressed.toLowerCase();
if( letterPressed=="s" ){
x-=dx;
} else if ( letterPressed=="d" ){
x+=dx;
} else if ( letterPressed=="x" ){
y+=dy;
} else if ( letterPressed=="e" ){
y-=dy;
} else {
// 文字キーじゃないのは e.keyCode から直接判定する
// key codeの定数は下で定義
// 文字キーもこのやり方で判別することも可能(key codeをみつければ)
switch (e.keyCode){
case KEY_LEFT:
x-=2*dx;
break;
case KEY_UP:
y-=2*dy;
break;
case KEY_RIGHT:
x+=2*dx;
break;
case KEY_DOWN:
y+=2*dy;
break;
case KEY_ENTER:
break;
case KEY_SPACE:
break;
default:
}
}
}
// 画面の描画
function drawCanvas(){
// 画面クリア
ct.fillStyle="#EEEEEE";
ct.fillRect(0,0,c.width,c.height);
drawtriangle(x,y,size);
drawtriangle(x1,y1,size1);
ct.fillStyle="#00FF00";
ct.fillText(message,50,50);
ct.fillText(message2,50,60);
}
//// drawCanvas 内で使う, 便利のために作った関数
function drawtriangle(x,y,s){
var triangle=[[0,-10],[-8,5],[+8,5]];
ct.fillStyle="rgba(255,160,160,0.5)";
ct.strokeStyle="blue";
ct.beginPath();
ct.moveTo(x+triangle[0][0]*s,y+triangle[0][1]*s);
for(var i=1;i<triangle.length;i++){
ct.lineTo(x+triangle[i][0]*s,y+triangle[i][1]*s);
}
ct.closePath();
ct.stroke();
}
//
function readForm(e){
message=textboxElement1.value;
message2=textboxElement2.value;
size1=selectElement.value;
}
///////////// 最初に1回だけ行えばいいこと //////////////////
window.addEventListener("keyup",eventKeyPressed,true);
setInterval(update,100);
var buttonElement=document.getElementById('b1');
var textboxElement1=document.getElementById('t1');
var textboxElement2=document.getElementById('t2');
var selectElement=document.getElementById('s1');
buttonElement.addEventListener('click', readForm, false);
// これだとテキストボックスに入力したら瞬時に反映される
textboxElement2.addEventListener('keyup', readForm, false);
}
参考
- 掌田津耶乃, HTML5 Webアプリケーションプログラミング入門
(第5章)
- 奥村晴彦先生 グラフを描く(canvas編)|JavaScript
