canvas要素に画像や動画を描画する
canvas要素に画像や動画を描画するには、context.drawImageメソッドを使用します。
構文
context.drawImage(image, dx, dy);または
context.drawImage(image, dx, dy, dw, dh);または
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);引数
| 引数名 | 型 | 説明 |
|---|---|---|
| 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
<canvas width="150" height="150" id="sample"></canvas>JavaScript
var canvasElem = document.getElementById('sample'),
imageElem = new Image(),
ctx = canvasElem.getContext('2d');
imageElem.src = 'img/sample.jpg';
imageElem.onload = function() {
ctx.drawImage(imageElem, 25, 25, 100, 100);
};