canvas要素に画像や動画を描画する

canvas要素に画像や動画を描画するには、context.drawImageメソッドを使用します。

構文

引数

引数名 説明
image
必須
node img要素またはcanvas要素またはvideo要素
sx
必須
number 引数imageでクリップする開始位置(x座標)
sy
必須
number 引数imageでクリップする開始位置(y座標)
sw number 引数imageでクリップする横幅
sh number 引数imageでクリップする高さ
dx number 描画する開始位置(x座標)
dy number 描画する開始位置(y座標)
dw number 描画する横幅
dh number 描画する高さ

サンプルコード

HTML

JavaScript

デモ

JavaScript逆引きリファレンス一覧へ戻る