JavaScript

[JavaScript] canvasタグに画像を読み込む

投稿日:2017年10月22日 更新日:

canvasタグに画像を読み込むサンプルです。

サンプルソース

例)ボタンを押すとcanvasに画像(inu.png)を読み込む

実行サンプル

ボタンを押すと、canvas領域に画像を設定します。

以下、灰色の部分がcanvas領域です。

drawImageの種類

drawImageメソッドの引数指定には以下3種類があります。

【drawImageメソッドの種類】
メソッド解説
drawImage(img, dx, dy)img:画像オブジェクト
dx:貼付時のX座標
dy:貼付時のY座標
drawImage(img, dx, dy, dw, dh)img:画像オブジェクト
dx:貼付時のX座標
dy:貼付時のY座標
dw:貼付時の横幅
dh:貼付時の縦幅
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)img:画像オブジェクト
sx:元画像のトリミング開始X座標
sy:元画像のトリミング開始Y座標
sw:元画像のトリミング横幅
sh:元画像のトリミング縦幅
dx:貼付時のX座標
dy:貼付時のY座標
dw:貼付時の横幅
dh:貼付時の縦幅

解説

  • drawImageを呼び出す時は画像読込みが完了している必要があるため、画像のonloadイベント内で処理を行う点がポイントです。

スポンサーリンク

スポンサーリンク

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] 連動するセレクトボックス

連動するセレクトボックスのサンプルです。 サンプルソース 例)都府県を選択すると、市区の選択肢が変わるセレクトボックス ...

[JavaScript] フォーカスが当たっている要素オブジェクトを取得する(.activeElement)

フォーカスが当たっている要素オブジェクトを取得するには、.activeElementを使用します。 サンプルソース 例) ...

[JavaScript] HTMLエスケープ処理をする

JavaScriptでHTMLエスケープ処理をするFunctionです。 サンプルソース 例)HTMLエスケープを行うF ...

[JavaScript] 要素を生成する(document.createElement)

JavaScriptでHTMLの要素を生成するには、document.createElementを使用します。 サンプル ...

[JavaScript] 配列から条件に合致する値のみ取得する(.filter)

配列から条件に合致する値のみ取得するには、.filter()を使用します。 サンプルソース 例1)数値配列から値が5以上 ...

スポンサーリンク