쌍용교육 -JavaScript수업 40일차 HTMLCanvas(1)

구 승 2024. 4. 15. 14:31

s01_basic.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 연습</title>
<style type="text/css">
	#canvas{
		border:1px solid #999; 
	}
</style>
</head>
<body>
	<canvas id="canvas" width="500" height="300">
		캔버스를 지원하지 않는 브라우저 입니다.<!-- 미지원 브라우저일 경우 텍스트 또는 이미지로 대체 가능 -->
	</canvas>
</body>
</html>

s02_fillRect.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 연습</title>
<script type="text/javascript">
window.onload = function(){
	const canvas = document.getElementById('canvas');
	if(canvas.getContext){
		const context = canvas.getContext('2d');
		//색상 지정
		context.fillStyle = 'rgb(200,0,0)';
		//사각형
		context.fillRect(10,10,100,100); //사각형 -> x,y,width,height 
		
		//색상 및 알파값 지정(0.0완전 투명 ~1.0완전 불투명)
		context.fillStyle = 'rgba(0,0,200,0.5)';
		//사각형
		context.fillRect(50,50,100,100);//사각형 ->x,y,width,height
		
		//특정 영역을 지우고 완전 투명
		context.clearRect(60,60,40,40);
		
		//선의 색상 지정
		context.strokeStyle = 'rgb(200,0,250)';
		
		//테두리만 있는 사각형
		context.strokeRect(200,50,70,150);
	}else{
		alert('브라우저가 캔버스를 지원하지 않습니다.');
	}
};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300">
	</canvas>
</body>
</html>

s03_moveTo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 연습</title>
<script type="text/javascript">
window.onload = function(){
	const canvas = document.getElementById('canvas');
	if(canvas.getContext){
		const context = canvas.getContext('2d');
		
		/* 
		선그리기
		1. 패스 시작
		2. 선 그리기
		3. 패스 닫기
		*/
		
		context.beginPath(); //패스 시작
		context.moveTo(50,50); //시작점을 표시함
		context.lineTo(80,80); //왼쪽 작은 직선
		
		context.moveTo(140,80); //새로운 시작점 표시
		context.lineTo(170,50); //오른쪽 작은 직선 
		
		context.moveTo(60,150); //새로운 시작점 표시
		context.lineTo(170,150); //아래 직선 	
		
		context.closePath();// 패스 끝
		
		context.stroke(); //경로에 테두리 표시, 명시하지 않으면 선이 그려지지 않음
		
	}else{
		alert('브라우저가 캔버스를 지원하지 않습니다.');
	}
};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300">
	</canvas>
</body>
</html>

s04_moveTo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 연습</title>
<script type="text/javascript">
window.onload = function(){
	const canvas = document.getElementById('canvas');
	if(canvas.getContext){
		const context = canvas.getContext('2d');
		
	//색칠된 삼각형
	context.beginPath();
	context.moveTo(50,50); //시작점 표시
	context.lineTo(150,50); 
	context.lineTo(50,150);
	
	context.closePath();
	context.fill();//도형 내부를 채우는 역할
	
	//빨간색 테두리 삼각형
	context.beginPath(); //패스 시작
	context.moveTo(80,80);//시작점 표시
	context.lineTo(200,100);//첫번째 선 
	context.lineTo(100,200);//두번째 선  
	
	context.closePath(); //패스 끝 (자동으로 마지막 선이 생기면서 선들을 연결시킴)
	context.strokeStyle = 'rgb(200,0,0)';
	context.stroke();
		
	}else{
		alert('브라우저가 캔버스를 지원하지 않습니다.');
	}
};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300">
	</canvas>
</body>
</html>