drawImage() メソッド

概要

　状態:- 　閲覧数:1,571 　投稿日:2014-03-15 　更新日:2017-08-22 　

「第1引数で指定した画像」をcanvasへ描画

構文

3つの異なる引数セット

1.イメージ描画

CanvasRenderingContext2Dオブジェクト.drawImage(image, dx, dy);

2.幅と高さを指定(トリミング)してイメージ描画

CanvasRenderingContext2Dオブジェクト.drawImage(image, dx, dy, dw, dh);

3.使用範囲を指定してイメージ描画

CanvasRenderingContext2Dオブジェクト.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

引数
・image … 描画イメージ。<img>要素、<canvas>要素、<video>要素のいずれかを指定
・dx … 描画イメージを開始するx座標
・dy … 描画イメージを開始するy座標
・dw … イメージを描画する幅(省略すると画像本来の幅)
・dh … イメージを描画する高さ(省略すると画像本来の高さ)
・sx … 元画像使用範囲の開始x座標(省略すると0)
・sy … 元画像使用範囲の開始y座標(省略すると0)
・sw … 元画像使用範囲の幅(省略すると画像本来の幅)
・sh … 元画像使用範囲の高さ(省略すると画像本来の高さ)

※引数単位はピクセル。イメージにおける1ピクセルは、canvas座標空間の1単位として換算される

注意点

　閲覧数:342　投稿日:2014-09-04　更新日:2014-09-04　

注意点

・画像の読み込み完了を待ってから処理をする
・引数に小数点を利用しない

小数点
・小数点を含んだ位置に描画すると処理速度が落ちる
・境界線が表示されてしまうこともある

対策
・Math.floor等で予め整数化(高速化するには整数の位置に描画)

順位	ページタイトル抜粋	％
1	drawImage() メソッド	94
2	getItem()メソッド	69
3	new Image()	67
4	clear()メソッド	67
5	createImageData()メソッド	65
6	getImageData()メソッド	65
7	arc()メソッド	64
8	compileShader()メソッド	63
9	createProgram()メソッド	63
10	translate() メソッド	63
11	drawArrays()メソッド	63
12	setItem()メソッド	62
13	stroke() メソッド	62
14	save()メソッド	62
15	rect()メソッド	62
16	scale()メソッド	59
17	setTransform()メソッド	59
18	createShader()メソッド	59
19	shaderSource()メソッド	59
20	clearRect()メソッド	58
	2024/4/25 22:34 更新

順位	ページタイトル抜粋	アクセス数
1	シェーダー \| compileShader()メソッド(WebGLRenderingContext)	4
2	フォーム \| その他	2
2	setTransform()メソッド \| CanvasRenderingContext2D	2
3	createLinearGradient()メソッド(CanvasRenderingContext2D ) カテゴリー	1
3	アフィン変換	1
3	WebGLProgram	1
3	W3C ／ World Wide Web Consortium \| その他	1
3	save()メソッド(CanvasRenderingContext2D ) カテゴリー	1
3	save()メソッド \| CanvasRenderingContext2D	1
3	lineTo()メソッド \| CanvasRenderingContext2D	1
3	arc()メソッド \| CanvasRenderingContext2D	1
	2024/4/25 1:01 更新

概要

構文

注意点

注意点

コメント投稿(ログインが必要)

ゲスト … 1行コメント投稿