コピペで使える JavaScript逆引きリファレンス

JavaScript/jQuery開発時に、こそっとお使いください。

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] 文字列をBase64デコードする(.atob)

文字列をBase64デコードするには、window.atobを使用します。 サンプルソース 例)文字列「abcdefg」 ...

[JavaScript] 文字列のバイト数を取得する

文字列のバイト数を取得するサンプルFunctionです。 サンプル 例)引数に渡された値のバイト数を取得するFuncti ...

[JavaScript] ブロックスコープを定義する

JavaScriptでブロックスコープを定義する方法です。 ECMAScript5以前の環境では即時関数を使用しますが、 ...

[JavaScript] 指定した数値の中で一番大きな(小さな)数値を取得する

指定した数値のなかで一番大きい(小さい)数値を取得するサンプルです。 サンプルソース 数値は配列に格納されているものとし ...

[JavaScript] Math関数の定数

Math関数に定義されている定数の一覧です。 Math関数の定数 定数メモ Math.E自然対数の底(≒2.718) M ...

スポンサーリンク