Javascript勉強会テトリス編~図形を描こう~2010年6月26日ものづくり寺子屋
この時間の目的四角を描いてみよう四角を描いたり消したりしてみよう図形を描いてみよう図形を動かしてみよう図形を自動で動かしてみよう
四角を描いてみよう
Javascriptの基本を確認しよう基本的に上から順番に実行する関数は、呼び出したときに実行される全体で使う変数は関数の外に書く変数名 = データ で、値を入力代入四角を描いてみようdocument.getElementByIdHTML内のtargetを、Javascriptで使うelmTarget.getContextペンを取るctx.fillStyleペンの「塗りつぶし」を「赤色」にするctx.fillRect塗りつぶされた四角形を描く
関数をHTMLから呼び出すonclick="main()“ボタンをクリックしたときに、関数mainを呼び出す
座標の書き方の違いグラフでは、右が+、上が+Javascriptでは、右が+、下が+上下が逆になることに注意
結果を確認しよう
四角を描いたり消したりしてみよう
四角を描いたり消したりしようctx.clearRectその領域のイラストを消す
ページが読み込まれたときに処理をするonload="main()“ページが読み込まれたときに、関数mainを呼び出す
結果を確認しよう
図形を描いてみよう
図形を描く
図形を描くctx.fillRect(0, 0, 20, 20);ctx.fillRect(20, 0, 20, 20);ctx.fillRect(20, 20, 20, 20);ctx.fillRect(20, 40, 20, 20);
結果を確認しよう
図形を動かしてみよう
図形を四角一つ分ずつ、下に移動
「一つ下」を計算してみる左上の四角の位置に注目0, 00, 200, 400, 60・・0, 0 + 縦の位置 * 20
結果を確認しよう
図形を自動で動かしてみよう
図形を自動で動かしてみようsetInterval(関数名, 間隔)間隔に指定した時間ごとに、関数を呼び出す。単位はミリ秒(1秒の1000分の1)setInterval(paint, 1000);Paint関数を1秒に1回呼び出す結果を確認しよう
休憩
JavaScript入門勉強会ー第一章
JavaScript入門勉強会ー第一章

JavaScript入門勉強会ー第一章