読者です 読者をやめる 読者になる 読者になる

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

DOM

(Javascript)Style要素を動的に扱う

htmlのheadタグ内に記述したstyleをJavascriptで操作するためのTipsです。

(Javascript)Video要素をJavascriptで制御する

Html5のVideo要素はHTMLMediaElementオブジェクトとして取得できます。以下、Javascript側で操作するためのTips集です。

(Javascript)Canvasの基本 canvasのコピー

画像のトリミングと同じ方法でcanvasのコピーを行うことができます。drawImageメソッドのソースとして、canvasオブジェクトを渡してあげれば、コピーの対象として扱えるようになります。

(Javascript)Canvasの基本 画像を表示する

canvas内に画像を読み込んで表示するためにはdrawImageメソッドを使用します。引数の数によって3パターンの描画方法を使うことができます。

(Javascript)Canvasの基本 マスクをかける

クリッピングを使用すると、canvas内にマスクを適用させることができます。クリッピングされた部分だけが表示され、それ以外の部分は非表示になります。

(Javascript)Canvasの基本 グラデーションの設定

線や面の色を指定する際に、グラデーションを指定することができます。グラデーションはCanvasGradientオブジェクトで行います。

(Javascript)Canvasの基本 文字を描画する

canvasはテキストを画像として書き出すことができます。基本的な使用方法をメモしておきます。

(Javascript)Canvasの基本 円を描画する

canvasで円を描画する場合はarcメソッドを使用して描画する円の形を指定します。fillメソッドで塗りつぶした円を、strokeメソッドで線のみを描画します。

(Javascript)Canvasの基本 線を描画する

Canvasで線を描画する方法を1つにまとめておきます。線の描画は「直線」か「曲線」の2種類の方法があります。

(Javascript)Canvasの基本 矩形を描画する

描画の基本です。句形だけでも色々とプロパティがあるので、一応まとめてメモしておきます。

(Javascript)Canvasの基本 2次元のcanvasを作成する

基本中の基本です。Html内にcanvasを作成して、描画をするための方法をメモしておきます。

(DOM)イベントの登録 - addEventListener

スクリプト側から各ノードにイベントを登録できるaddEventListenerの使用法を自分用のメモとしてまとめておきます。

(DOM)HTMLノードタイプについて

DOMの定義では、htmlタグはいつくかのノードタイプに分けられます。よく使いそうなタイプを以下に記述しておきます。ノード名の左の数値はelement.nodeTypeプロパティで取得できる値です。

(DOM)要素を追加するサンプル

DOMを使って要素を追加するサンプルです。子要素を追加する関数として作成してみました。ちなみに、innerHTMLを使えば簡単なのですが、DOMの仕様に沿った場合は以下のようになるらしいので、メモとして残しておきます。

(DOM)Document.Allの代わり

Document.Allは非推奨の機能です。といえども、これに変わる機能がDOMには用意されていないようで、ネットを探してもこれといった解決方法を見つけることが出来ませんでしたが、以下の記述で簡単に全エレメントを取得できることがわかったので、共有します。