HTML5 - CANVAS

사용 예제는 HTML5의 CANVAS를 이용하여 그린 것으로, 예제는 diveintohtml5.org에서 사용된 예제를 사용하였음.

SAMPLE :

JAVA SCRIPT :

<script type="text/javascript">
		onload = function(){ //페이지 로딩시 자동으로 실행
			draw1();
		};
		function draw1(){ 
			var canvas = document.getElementById('c1');
			if ( ! canvas || ! canvas.getContext ) { return false; }
			var ctx = canvas.getContext('2d'); //canvas사용시 필수입력항목인듯
			ctx.beginPath();

			//격자무늬
			for ( var x = 0.5; x < 500; x += 10 ) {				
				ctx.moveTo(x, 0);
				ctx.lineTo(x, 375);
			}
			for ( var y = 0.5; y < 375; y += 10 ) {
				ctx.moveTo(0, y);
				ctx.lineTo(500, y);
			}
			ctx.strokeStyle = '#eee';
			ctx.stroke();
			
			ctx.beginPath();
			
			//가로선
			ctx.moveTo(0, 40);
			ctx.lineTo(240, 40);
			ctx.moveTo(260, 40);
			ctx.lineTo(500, 40);
			ctx.moveTo(495, 35);
			ctx.lineTo(500, 40);
			ctx.lineTo(495, 45);
			
			//세로선
			ctx.moveTo(60, 0);
			ctx.lineTo(60, 153);
			ctx.moveTo(60, 173);
			ctx.lineTo(60, 375);
			ctx.moveTo(65, 370);
			ctx.lineTo(60, 375);
			ctx.lineTo(55, 370);
			
			ctx.strokeStyle = "#000";
			ctx.stroke();
			
			//폰트
			ctx.font = 'bold 19px sans-serif';
			ctx.fillText('X', 244, 47);
			ctx.fillText('Y', 54, 170);
			
			ctx.textBaseline = 'top';
			ctx.fillText('(0,0)', 10, 5);
			
			ctx.font = 'bold 19px sans-serif';
			ctx.textAlign = 'right';
			ctx.textBaseline = 'bottom';
			ctx.fillText('(500,375)', 492, 370);
			
			ctx.fillRect(0, 0, 3, 3);
			ctx.fillRect(497, 372, 3, 3);
		}
	</script>

HTML :

<canvas id="c1" width="500" height="380"></canvas>