HTML5 canvas drawImage メソッド
例
キャンバスへこの画像の一部を描画します:
キャンバス
あなたのブラウザは canvas タグをサポートしていません。
JavaScript:
var c=document.getElementById("myCanvas");
Try it yourself »
定義と用法
drawImage メソッドは、キャンバスへ画像を使用したい場合に使用します。
drawImage メソッドは、イメージの一部を描画し、画像サイズの拡大・縮小または何れか一方を行うこともできます。
drawImage メソッドは、イメージで何をしたいかに応じて、9つまでのパラメータを取ることができます。
image オブジェクトは、イメージ、ビデオ、または他の canvas 要素にすることができます。
Image オブジェクトとしてのビデオ
キャンバスのビデオからフレームを描画:
ビデオ:
デモを開始するには再生ボタンを押してください。
キャンバス:
your browser does not support the canvas tag
注: キャンバスは、ビデオの現在のフレームを20ミリ秒ごとに描画しています。
Try it yourself »
JavaScript 構文
キャンバスへイメージを配置する:
JavaScript 構文:
context .drawImage(img,x,y );
イメージを配置し、幅と高さを指定する:
JavaScript 構文:
context .drawImage(img,x,y,width,height );
指定した幅と高さに画像エリアを切り取り、そのエリアへ配置する:
JavaScript 構文:
context .drawImage(img,sx,sy,swidth,sheight,dx,dy,dwidth,dheight );
ブラウザ・サポート
drawImage メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
パラメータ
値
説明
Play it
img
image video canvas 描画で使用するイメージオブジェクト
x
x-coordinate 画像の左上隅を配置する x 座標
Play it »
y
y-coordinate 画像の左上隅を配置する y 座標
Play it »
width
width ピクセル値で描画（画像）の幅
Play it »
height
height ピクセル値で描画（画像）の高さ
Play it »
dx
x-coordinate イメージの切取り部分を配置する x 座標
Play it »
dy
y-coordinate イメージの切取り部分を配置する y 座標
Play it »
dwidth
width ピクセル値で画像の切取り部分部分の幅
Play it »
dheight
height ピクセル値で画像の切取り部分部分の高さ
Play it »
HTML5 canvas リファレンス
