javascriptプログラミング

JavaScriptでコード内でイベントを発生させる方法

ブラウザ上でユーザーが何も操作をすることなく、イベントを発生させたい場合の話。 コード内で自分で作ったイベントを発生させる方法の備忘録。 JavaScriptでコード内でイベントを発生させる方法1 先にコードを書いておく。 HTMLは HT...

JavaScriptでtableの作成・td値の取得・行追加・クリック行取得

JavaScriptで何もないところにtableを動的に作成する createElement(tagName)とすることでtagNameで指定されたHTML要素を作成することができる。 tableを作成したい場合はcreateElement...

JavaScriptの配列と連想配列の扱い方(宣言・要素・追加・削除)

こちらも自分用の備忘録としてまとめたものです。 JavaScriptの基本的な配列の宣言方法 JavaScriptではいくつかの配列の宣言方法がある。C言語のように配列長を指定せずに生成することもできる。 JavaScriptで配列の要素に...

JavaScriptのCanvasとrotate()関数を使って動く時計を描画してみる

まずHTML側は とした。ページ読込時にinit関数を呼び出して、そこでキャンバスの設定を行う予定。キャンバスのサイズは250x250の黄色。 init関数は以下のように。 グローバル変数でctxと、intervalID を宣言。 tran...

JavaScriptのCanvasのsave()とrestore()関数の使い方

キャンバスの状態を保存するsave()関数と、 保存した状態を復元するrestore()関数の使い方をやっていきます。 以下の順序でやります。 1.塗りつぶしの色と、座標系を保存して、 2.塗りつぶしの色と、座標系を移動して、 3.塗りつぶ...

JavaScriptのCanvasのtranslate()関数の使い方と意味

この記事の主題は「canvasのtranslateで座標の中心を移動させることができる」というこです。 ★例えば 描画領域の左上の座標は(0,0)となっているので、円を描くときに(0,0)を中心に円を描いてしまうと下図のようにおおかしなこと...

JavaScriptでサイコロ転がし – Canvasに画像(DrawImage)をランダム表示

スタート ストップ ソースコードは以下のようになった。 まずはHTML側。 スタートとストップボタンを表示。それぞれのボタンにonclickプロパティでstartTimer、stopTimer関数をセット。 canvasを囲うようにdivの...

スマホの画面サイズに合わせて、canvasサイズを設定する

スマホの画面サイズに合わせて、canvasのサイズを設定する HTML側は以下のようにする。canvasタグをdivタグ(id="wrapper"の)で囲っておく。 divタグはCSSで幅高さ100%にしておき、Canvasのサイズは最初の...