LemonteaのUnity部屋

C#とかのお話です~

JavaScript入門 キーボード入力を受け取る

こんにちは。レモンティーです。

今回はキーボード入力を受け取ります。

使うのはdocument.body.onkeydownです。

document.body.onkeydown = function(e){
  //処理 
}

のように使います。
e.keyCodeでキーコードを取得できるので
どのキーが押されたか判別できます。

キーコード一覧は↓
キーコード一覧

即席チェックサンプルは↓


ここにキーを入力

キーコード


サンプルはこんな感じです。
HTML

<form name="f1">
ここにキーを入力
<input type="text" name="t1" value="">

キーコード
<input type="text" name="t2" value="">
</form>

JS

<script>
document.body.onkeydown = function(e){
  document.f1.t1.value = "";
  document.f1.t2.value = e.keyCode;
}
</script>


今回はこれでおしまいです。
www.sawalemontea.com



JavaScript入門 Canvasで2dの描画

こんにちは。レモンティーです。

今回はJavaScriptCanvasを使って2dの描画をします。

Canvasで様々な描画を行うには、
まずCanvas要素のcontextを取得します。

 var canvas = document.getElementById('canvas1');
 var con = canvas.getContext('2d');

これで色々な描画ができます。

//四角形
con.fillRect(x,y,w,h); 
  //塗りつぶし

con.strokeRect(x,y,w,h); 
  //輪郭

con.clearRect(x,y,w,h); 
  //範囲内を消去

//直線
con.beginPath();
con.moveTo(x,y);
con.lineTo(x,y);
con.stroke();
  //moveToで描画開始位置に移動し、lineToでそこから任意の場所へ直線をひく。
  //引いた直線はstrokeすると見れる。
  //lineToを繰り返すと多角形も書ける。
  //開始位置に戻るにはcon.closePath()を使う
  //これで閉じた図形はcon.fillで塗りつぶせる。

//円弧
con.arc(x,y,r,θ0,θ1,反時計まわりかどうか);
  //θ0,1は開始の角度と終了の角度。
  //単位はラジアンなのでMath.PI等を使い指定する。
  //数学と逆回りなので-1倍するといつも通り。


こんな感じです。
(記事1つのページだと表示されますが記事一覧からだとうまく動きません。)









コードはこんな感じです。
HTML

<canvas id="cv" width='400' height='400'></canvas><br>
<button type="button" onclick="test1()">塗りつぶし四角形</button>
<button type="button" onclick="test2()">輪郭のみ四角形</button>
<button type="button" onclick="test5()">直線たち</button>
<button type="button" onclick="test3()">円弧A</button>
<button type="button" onclick="test4()">円弧B</button>
<button type="button" onclick="test0()">消す</button>

JS

<script>
 var canvas = document.getElementById('cv');
 var con = canvas.getContext('2d');

function test0(){
  con.clearRect(0,0,400,400);
}

function test1(){
  con.fillRect(100,200,40,130);
}

function test2(){
  con.strokeRect(200,100,50,78);
}

function test3(){
  con.beginPath();
  con.arc(200,200,150,-Math.PI/6,-Math.PI*7/6,true);
  con.moveTo(200,200);
  con.closePath();
  con.stroke();
}

function test4(){
  con.beginPath();
  con.arc(300,200,100,0,Math.PI*2,true);
  con.moveTo(300,200);
  con.closePath;
  con.fill();
}

function test5(){
  con.beginPath();
  con.moveTo(100,100);
  con.lineTo(120,300);
  con.lineTo(280,300);
  con.lineTo(295,150);
  con.lineTo(305,140);
  con.lineTo(315,140);
  con.lineTo(315,275);
  con.lineTo(305,275);
  con.lineTo(285,250);
  con.lineTo(300,100);
  con.closePath();
  con.stroke();
}

</script>


なお、キャンバスの範囲がわかりやすいようにCSSで枠を付けていますが本来は枠はありません。


今回はこれでおしまいです。

www.sawalemontea.com












JavaScript入門 CSSのプロパティを操作



こんにちは。レモンティーです。

今回はJavaScriptCSSのプロパティを操作してみます。

↓のように要素を取得して、.style.プロパティ = 値 とすればOKです。

let x = document.getElementById("testId");
x.style.color = "red";


これはテストのための文です。


もっと他の例も見てみます。


表示・非表示の切り替えも同様に
display = "none" ←→ display = "block" 等
visibility = "hidden" ←→ visibility = "visible"
を使うことで実現できます。



HTML

<div id="sample2">消したいもの</div>

SCC

    let x = document.getElementById("sample2");

     if(x.style.display == "inline"){
      x.style.display = "none";
    }else{
      x.style.display = "inline";
    }



要素の移動もできます。





lemontea












コードはこんな感じです。

HTML

<img id="sample3" src="https://path/"
width="200" height="200" border="2" alt="lemontea" >
<button type="button" onclick="test3(120)">ひだり</button>
<button type="button" onclick="test3(320)">みぎ</button>

JS

  function test3(num){
    let x = document.getElementById("sample3");
    x.style.left = `${num}px`;
  }

今回はこれでおしまいです。
www.sawalemontea.com



JavaScript入門 タイマーで定期的に処理 setIntervalでn秒ごとに処理してclearIntervalで停止

こんにちは。レモンティーです。

今回は定期的な処理と、その停止です。

使うのはsetIntervalとclearIntervalです。

var timer;

//開始
timer = setInterval("関数()",間隔);

//停止
clearInterval(timer)


あああああ



サンプルのコードはこれです。
HTML

<p id="test">あああああ</p>
<button type="button" onclick="start()">開始</button>
<button type="button" onclick="stop()">停止</button>

JS

<script>
  var timer;
  var i = 0;
  var x = new Array("いいいいい","ううううう","えええええ","おおおおお","あああああ");
  var target = document.getElementById("test");  

  function start(){
    timer = setInterval("show()",1000);
  }

  function stop(){
    clearInterval(timer);
  }

  function show(){
    test.innerHTML = x[i%5];
    i += 1;
  }
</script>



今回はこれでおしまいです。
www.sawalemontea.com