muku@happi.18

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のサイズは最初の...

JavaScriptで、canvasに円弧や円を描くのと、角度(ラジアンの計算)

構文は以下のとおり。 arc(x, y, radius, startAngle, endAngle, anticlockwise) x,yが円の中心 radiusは半径 startAngleが開始角度。X軸方向が0度。 endAngleが終...

CSSをHTML本文に書く方法と外部ファイルから読み込む方法

CSSをHTML本文に書く方法は以下のとおり。headタグ内にstyleタグを記述。type="text/css"として、その中にCSSを記述すればよい。 CSSの記述が終われば、/styleタグで閉じること。 styleタグ内は、(昔対応...