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] 遷移元ページのURLを取得する

JavaScriptで遷移元ページのURLを取得するサンプルです。 サンプルソース 例)遷移元ページのURLを取得する ...

[JavaScript] canvasに四角形を描画する(strokeRect、fillRect)

canvasに四角形を描画するには、strokeRect、fillRectを使用します。 サンプルソース 例)canva ...

[JavaScript] 消費税額を取得するFunction

引数に受け取った金額の消費税額を返すFunctionサンプルです。 サンプルソース 例)税率8%で計算。引数が数値以外の ...

[JavaScript] JavaScriptのみ実行して遷移は行わないリンクを作成する

JavaScriptのみ実行するリンクにするは、hrefに"javascript:~"と記述します。 サンプルソース 例 ...

[JavaScript] ime-modeが使えるか判定する

ime-modeが使えるかどうか判定するサンプルです。 サンプルソース 例)ime-modeが使えるかどうかを判定して表 ...

スポンサーリンク