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

구 승 2024. 4. 15. 14:32

s09_quadraticCurveTo.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');
		
	/* 
	quadraticCurveTo(cp1x,cp2py,x,y):한 개의 조절점,
	즉(cp1x,cp1y)를 이용해서 (x,y)까지의 곡선을 그림
	*/
		context.beginPath();
	//시작점을 (50,200)에 표시
	context.moveTo(50,200);
	//(200,50)을 조절점으로 해서 현재 위치 (50,200)에서 (350,200)까지 곡선을 그림
	context.quadraticCurveTo(200,50,350,200);
	context.stroke();
	
	
	}else{
		alert('브라우저가 캔버스를 지원하지 않습니다.');
	}
};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300">
	</canvas>
	<br><br>
	<img src ="../files/exp_01.gif">
</body>
</html>

s10_bezierCurveTo.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');
		/* bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) :두개의 조절점
		즉 (cp1x,cp1y)와 (cp2x,cp2y,)를 이용해서 (x,y)까지의 곡선을 그림
		*/
		context.beginPath();
		//시작점을 (50,200)에 표시
		context.moveTo(50,200);
		//조절점 두 개 사용해서 곡선을 그림
		context.bezierCurveTo(90,50,310,50,350,200);
		context.stroke();
	
	}else{
		alert('브라우저가 캔버스를 지원하지 않습니다.');
	}
};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300">
	</canvas>
	<br><br>
	<img src ="../files/exp_02.gif">
</body>
</html>

s11_image.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');
		
		//Image 객체 생성
		const img = new Image();
		img.src = '../files/landscape.jpg';
		img.onload = function(){
			//Image 객체에 저장된 이미지 정보를 이용해서 canvas에 이미지 표시
			context.drawImage(img,10,10); //이미지 객체,x,y
			
			context.fillStyle = 'rgb(200,0,0)';
			context.fillRect(20,20,100,100);
		};
		
	}else{
		alert('브라우저가 캔버스를 지원하지 않습니다.');
	}
};
</script>
</head>
<body>
	<canvas id="canvas" width="800" height="400">
	</canvas>
</body>
</html>

s12_image.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');
		//Image 객체 생성
		const img = new Image();
		img.src = '../files/landscape.jpg';
		img.onload = function(){
							//이미지객체,x좌표,y좌표
			context.drawImage(img,10,10); //원래 크기 표기
							//이미지객체,x좌표,y좌표,width,height
			context.drawImage(img,10,500,200,100);
		};
	
		
	}else{
		alert('브라우저가 캔버스를 지원하지 않습니다.');
	}
};
</script>
</head>
<body>
	<canvas id="canvas" width="800" height="700">
	</canvas>
</body>
</html>

s13_pattern.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');
		//Image 객체 생성
		const img = new Image();
		img.src = '../files/pattern.png';
		img.onload = function(){
			//이미지 반복 지정(repeat,repeat-x,repeat-y,no-repeat)
			let pttn = context.createPattern(img,'repeat');
			//생성한 패턴 지정
			context.fillStyle = pttn;
			context.fillRect(0,0,500,300);
		};
		
	}else{
		alert('브라우저가 캔버스를 지원하지 않습니다.');
	}
};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300">
	</canvas>
</body>
</html>