読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

html5のcanvasで,画像の上に線を描画する

html5 サンプルコード

html5のcanvasで,「画像の上」に線を描画してみよう。


まず画像のロードが完了してから,画像の表示を行ない,

そのあとで線を描画するのがポイント。

サンプルコード:

<!doctype html>
<html lang="ja">
<head></head>
<body>


描画領域<br>
<canvas id="hoge" width="1000" height="1000"></canvas>


<script>

function init(){
	// 画像の表示イベント
	var img = new Image();
	img.src = "sample.jpg";
	img.onload = function(){
		// 画像を表示
		ctx.drawImage(img,0,0,500,500);
		
		// 線を描画
		ctx.beginPath();
		ctx.moveTo(0, 0);
		ctx.lineTo(200, 200);
		ctx.stroke();
	}
}

// 実行をセット
var ctx;
document.body.onload = function(){

	ctx = document.querySelector("#hoge").getContext("2d");

	init();

}

</script>


</body>
</html>

参考資料:

画像を組み込む - Canvas - HTML5.JP
http://www.html5.jp/canvas/how6.html

  • Imageオブジェクトは、画像が読み込まれない限り、Imageオブジェクトとしての機能を果たすことができません
  • メソッドを呼び出す前に、画像のロードが完了するようにする(プリロードする)


Canvasで画像の上に線を引くには。 Canvasで画像を表示し、その..
http://q.hatena.ne.jp/1382538311