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

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサーリンク