drawImage メソッド

この記事が対象とする仕様

	HTML5 HTML構文	◎	対象です。
	HTML5 XHTML構文	◎	対象です。

出典：HTML Canvas 2D Context 2012年3月7日 Editor's Draft版 http://dev.w3.org/html5/2dcontext/

canvas要素に画像を描画します。

１．構文

drawImageメソッドには3種類の定義があり、目的によって使い分けることができます。

void drawImage(image, double dx, double dy);
void drawImage(image, double dx, double dy, double dw, double dh);
void drawImage(image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh);

パラメーター

image

元になる画像。HTMLImageElementオブジェクトまたはHTMLCanvasElementオブジェクトまたはHTMLVideoElementオブジェクトを指定します。

描画を開始する位置のX座標。

描画を開始する位置のY座標。

描画する横幅。imageで指定した元画像の横幅と異なる横幅を指定した場合、その横幅に適合するように拡大縮小して描画します。

描画する高さ。imageで指定した元画像の高さと異なる高さを指定した場合、その高さに適合するように拡大縮小して描画します。

元画像のうち描画対象となる四角形の左上のX座標。元画像の全体を描画対象とするのではなく一部分を描画対象にする場合に指定します。

元画像のうち描画対象となる四角形の左上のy座標。元画像の全体を描画対象とするのではなく一部分を描画対象にする場合に指定します。

元画像のうち描画対象となる四角形の横幅。元画像の全体を描画対象とするのではなく一部分を描画対象にする場合に指定します。

元画像のうち描画対象となる四角形の高さ。元画像の全体を描画対象とするのではなく一部分を描画対象にする場合に指定します。

２．解説

canvas要素に画像を描画します。

このメソッドはグラフィックパスには影響を与えません。

３．例

次の例はcanvas要素にimage要素の画像を描画します。

var canvas1 = document.getElementById('Canvas1');
var image1 = document.getElementById('Image1');
var g = canvas1.getContext('2d');

g.drawImage(image1, 10, 10);

次の例はimage要素の画像を45度回転させてcanvas要素に描画します。

var canvas1 = document.getElementById('Canvas1');
var image1 = document.getElementById('Image1');
var g = canvas1.getContext('2d');

g.rotate(46 * Math.PI / 180);
g.drawImage(image1, 100, 0);

４．プラットフォーム

HTML5

IE9