【canvas】HTML5で絵を描くを参考にhtml5で四角をかくときのメモ！
四角をかく
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas sample</title>
<script>
onload = function(){
var canvas = document.getElementById('sample');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50,50);
context.lineTo(150,50);
context.lineTo(150,150);
context.lineTo(50,150);
context.closePath();
context.stroke();
}
</script>
</head>
<body>
<h1>canvas sample</h1>
<canvas id="sample"></canvas>
</body>
</html>
html5ですよーってことで<!DOCTYPE html>
getElementByIdのところのsampleはcanvasのID。
Canvas要素のノードオブジェクトを取得して、getContext()メソッドでCanvasへアクセスするためのオブジェクトを取得します。
ここでは、getContext()メソッドの引数は2dを使います。
ここの解釈まだちょっと噛み砕けてません・・・
線をかくための処理をする
/* １．線を書くよ！と宣言 */
context.beginPath();
/* ２．線を書き始める座標へ移動 */
context.moveTo(50,50);
/* ３．引きたい線の終端へ移動 */
context.lineTo(150,50);
/* ４．３の繰り返し */
context.lineTo(150,150);
context.lineTo(50,150);
context.closePath();
/* ５．実際に線を引く */
context.stroke();
おおおお！！！四角できた！すごい！！
