概要
状態:-
閲覧数:1,581
投稿日:2014-03-16
更新日:2014-03-16
新規画像オブジェクト生成
・画像はnew演算子を使ってオブジェクト化できる
・オブジェクト化された画像は、スクリプトを使って操作可能
画像オブジェクトとは?
・画像ファイルに関する情報を提供したり、画像を操作したりするオブジェクト
・HTMLファイル上の「img」要素の[0]から始まるimages配列を自動的に作成している
・これにより、「img」要素内で設定した「name」属性や「id」属性で画像を特定する以外に、配列を使って画像を特定することも可能
・Imageオブジェクトは、それ自体がdocumentオブジェクトのプロパティでもある
・Imageオブジェクトを記述する場合、最上層のオブジェクトである「window」は、省略可能
・JavaScript1.1で追加されたオブジェクト(HTML5以前から存在している仕様)
使用例
・画像置換
・画像アニメーション表示
・イベント・ハンドラと組み合わせ、画像をインタラクティブに切替
・HTMLの「img」要素を、JavaScriptのオブジェクトとして取り扱うほか、ビルトイン・オブジェクトのようにNewを使って、オブジェクトを新たに作成できる
・「HTML5 canvas API」に用意されているdrawImage()へ渡し、canvasへ画像を表示することも可能
※drawImage()には、HTMLImageElementだけでなく、HTMLCanvasElementやHTMLVideoElementを渡すこともできる
引数
・第1引数 … (略可) Number 表示の幅(単位:ピクセル値)
・第2引数 … (略可) Number 表示の高さ(単位:ピクセル値)
・戻り値 … HTMLImageElement 新しく作成された HTMLImageElement オブジェクト
・引数から、表示サイズを指定することが可能
・引数を省略した場合、画像の読み込みを行うと、画像のサイズと表示のサイズが同じになる
・画像はnew演算子を使ってオブジェクト化できる
・オブジェクト化された画像は、スクリプトを使って操作可能
画像オブジェクトとは?
・画像ファイルに関する情報を提供したり、画像を操作したりするオブジェクト
・HTMLファイル上の「img」要素の[0]から始まるimages配列を自動的に作成している
・これにより、「img」要素内で設定した「name」属性や「id」属性で画像を特定する以外に、配列を使って画像を特定することも可能
・Imageオブジェクトは、それ自体がdocumentオブジェクトのプロパティでもある
・Imageオブジェクトを記述する場合、最上層のオブジェクトである「window」は、省略可能
・JavaScript1.1で追加されたオブジェクト(HTML5以前から存在している仕様)
使用例
・画像置換
・画像アニメーション表示
・イベント・ハンドラと組み合わせ、画像をインタラクティブに切替
・HTMLの「img」要素を、JavaScriptのオブジェクトとして取り扱うほか、ビルトイン・オブジェクトのようにNewを使って、オブジェクトを新たに作成できる
・「HTML5 canvas API」に用意されているdrawImage()へ渡し、canvasへ画像を表示することも可能
※drawImage()には、HTMLImageElementだけでなく、HTMLCanvasElementやHTMLVideoElementを渡すこともできる
構文
画像オブジェクト名 = new Image(画像の幅, 画像の高さ)
引数
・第1引数 … (略可) Number 表示の幅(単位:ピクセル値)
・第2引数 … (略可) Number 表示の高さ(単位:ピクセル値)
・戻り値 … HTMLImageElement 新しく作成された HTMLImageElement オブジェクト
・引数から、表示サイズを指定することが可能
・引数を省略した場合、画像の読み込みを行うと、画像のサイズと表示のサイズが同じになる
Twitter検索結果。「new Image()」に関する最新ツイート
New gameやり直し
#雑談
#ミラティブ
#配信 中!
https://t.co/Icl0V4K2dq 2023/02/04 10:45
New game
#雑談
#ミラティブ
#配信 中!
https://t.co/uW1cr4DFUp 2023/02/04 10:43
New game
#雑談
#ミラティブ
#配信 中!
https://t.co/GLu4OyKZTV 2023/02/04 10:31
New game
#雑談
#ミラティブ
#配信 中!
https://t.co/lgXbZIeoME 2023/02/04 10:27
https://t.co/hgPbRCVe6Q
この記事読んでいろいろ遊んでみて、AIと仲良くなる方法を探してみてるところです。 2023/02/04 05:14
アースン
#NEW STATE MOBILE
#ミラティブ
#配信 中!
https://t.co/O6Xu7GF6Hq 2023/02/03 20:56
ちとだけ!
#NEW STATE MOBILE
#ミラティブ
#配信 中!
https://t.co/CQqwensiQl 2023/02/03 19:38
MY NEW GEAR(ニチャァ
#配信 中!
https://t.co/jJL7YTBPbZ 2023/02/03 18:50
鉄虎イベント頑張るんじゃ(:3_ヽ)_
#ミラティブ
#あんスタ
#配信 中!
https://t.co/seFPtyBfFt 2023/02/03 18:49
特別な英雄を獲得しました。この喜びを皆にシェアしましょう。 https://t.co/JSneG2zcmn #MafiaCity 2023/02/03 18:23