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] オブジェクトのキーを全件取得する(for-in)

オブジェクトのキーを全件取得するには、for-in構文を使用します。 サンプル 例)オブジェクト(obj)のキーを全件表 ...

[JavaScript] 使用しているブラウザを判定する

使用しているブラウザを判定するサンプルです。 サンプルソース 例)使用しているブラウザを判定する [crayon-5b5 ...

[JavaScript] 日付を和暦で表示する

日付を和暦で表示するサンプルです。 toLocaleDateStringを使う方法 toLocaleDateString ...

[JavaScript] functionの引数に渡された引数の数を取得する(argument.length)

functionの引数に渡された引数の数を取得するには、argument.lengthの値を参照します。 サンプル fu ...

[JavaScript] ページロード完了時のイベントを取得する(onLoad)

ページロード完了時のイベントを取得するには、onloadを使用します。 window.onloadを使うパターンと、bo ...

スポンサーリンク