HTML５
【今回の内容】 掲題の通り、canvasにクリックすると動く四角を描きました 【処理の流れ】 ■キャンパス要素の生成の流れ ①マウス押下時の座標を取得 ②マウスを離したときの座標を取得 ③キャンパス要素の生成 ④キャンパスの色・クリックイベント・キャンパス…
【今回の紹介】 掲題の通りです。 【内容】 以下の理由で、canvas要素を追加することで、自由に四角を描くサンプルを作成しました①bodyに大きなcanvasを生成して、四角を描くサンプルなどはたくさんありますが canvasを追加していくというサンプルがなかった…
【今回の紹介】 HTML5を学習したのでそのメモを残しておきます。 【メモ】 下記のサンプルを通して、 ・カーソルの座標をとりながら、線を描く手順 ・乱数と関数の再帰的呼び出し、キャンパスへの描画を組み合わせ でできることについて学べました 参考ソー…
【今回の紹介】 掲題のものを作ったので、メモしときます。 【内容】 シンプルな作りです。 以下のイベントのときの座標をとって描画しています。 ・マウスを押下したとき ・マウスを離したとき 【参考ソース】 <html> <head> <meta charset='utf-8'> </head> <title>HTML5</title> <body> <canvas id='canvas'></canvas> <script> startX=0; startY=0; window.onl</body></html>…
【今回の紹介】 掲題の通りです。 【内容】 ソース的な以下の部分がわかりにくいのでメモしときます。 ①マウスが押されてから、マウスが動いている時のイベントを拾うために グローバル関数を使用していること ちなみに、 mousedown=false; ②描画の終わりを…
【今回の紹介】 テキストボックスの値を図に出力する処理を行います。 具体的には、出力ボタンを押すと、図の描画を行い、図の中に入力したテキストボックスの値を出力するという処理です※複数の値をもった複数の図を管理するようにしていきたいので、図obj…
【今回の紹介】 掲題の通り、Webストレージを使って、登録・保存・検索・出力する処理をメモとして残します。参考 Web Storageによるテキストデータの保存 【メモ】 ①Webストレージ内はキーとバリューで管理されている Webストレージ内はキーとバリューで管…
【今回の紹介】 Webにおいて簡易な情報をローカルに保存するには ①ブラウザに保存する（クッキー） ②外部ファイルへ保存する（XML・jsonとしてはきだす） ③DBしかなく、意外と面倒だと思ってました。 いまさらですが、この①の部分野認識は、HTML5に登場によ…
【今回の紹介】 前回の続き前回の記事:ライフゲームより簡単なサンプルを作る 以下の処理を追加してよりライフゲームっぽくなったので紹介。 ①繰り返し処理を行う関数 ②描画したキャンパスを初期化する処理 【内容】 ①繰り返し処理を行う関数 繰り返し、描画…
【今回の紹介】 以下のサイトでHTML5とjavascriptでできるライフゲームに興味を持った。 参考：ライフゲーム 今回は、そのライフゲームで行っている処理のうち、以下のような部分を切り出して サンプルを作ったので紹介。 ①キャンパス内にセルを敷き詰める考…
【今回の紹介】 気晴らしにHTML5の学習を行ったので、そのメモをのせます 【内容】 やったことは HTMLに四角を描く です。 ■手順 ①canvasをタグを配置する ②スクリプトでcanvasタグのobjを取得 ③canvasobjのgetContextで２Dで書くことを設定する ④塗りつぶす…
