【HTML5・javascript】テキストボックスの値を図に出力する
【今回の紹介】
テキストボックスの値を図に出力する処理を行います。
具体的には、
出力ボタンを押すと、図の描画を行い、図の中に入力したテキストボックスの値を出力するという処理です
※複数の値をもった複数の図を管理するようにしていきたいので、図objを作って書きました。
(現段階でかなり不備はありますが、、)
【内容】
中身の処理として以下の手順で行っています。
①ボタンにイベントハンドラを設定
②ボタン押下時に図obj生成処理を呼ぶ
③テキストボックス内の値を取得する
④③の値を図objを生成する
⑤描画処理に生成した図objをわたす
④描画処理にて、objのプロパティを使用し、描画する
今後のとしては、以下のことができるようにしたいと考えています。
①複数objを生成する処理
②objをjsonで保存する処理
③②で保存した情報を読み込む処理
④生成したobjを動かす処理
⑤生成したobjのプロバティを変更する処理
⑥生成したobjを削除する処理
【参考ソース】
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h1>入力した値を図に出力する</h1> <span>name</span><input type='text' id='name'></input> <span>id</span><input type='text' id='id'></input> <span>tel</span><input type='text' id='tel'></input> <input type='button' id='addObj_button1' value='出力'></input> <canvas id='canvas'></canvas> <script> window.onload=function(){ var add_event=$("addObj_button1"); add_event.onclick=addobj; } //////////////// //クラス定義:図// //////////////// function square(name,id,tel){ this.name=name; this.id=id; this.tel=tel; this.x=0; this.y=0; this.height=500; this.width=500; } //以下の処理を呼び出す処理 //図をobj生成処理 //図の描画処理 function addobj(){ var newSquareObj=getinput(); draw(newSquareObj); } //入力値を取得し、オブジェクトを生成する処理 function getinput(){ var name=$("name").value; var id=$("id").value; var tel=$("tel").value; var newSquare =new square(name,id,tel); return newSquare; } //描画処理 function draw(newSquareObj){ var canvas=$("canvas"); canvas.height=newSquareObj.height; canvas.width=newSquareObj.width; var context=canvas.getContext('2d'); context.fillStyle='#FFFFF0'; context.fillRect(newSquareObj.x,newSquareObj.y,newSquareObj.width,newSquareObj.height); context.font ="30px 'MS Pゴシック'"; context.fillStyle='#000000'; var msg="IDは"+newSquareObj.id+",名前は"+newSquareObj.name+",内線は"+newSquareObj.tel; context.fillText(msg,10,50); } //DOMobjを取得する処理 function $(id){ return document.getElementById(id); } </script> </body> </html>