투케이2K

79. (javascript/자바스크립트) canvas 캔버스에 배경 이미지 로드 수행 실시 본문

JavaScript

79. (javascript/자바스크립트) canvas 캔버스에 배경 이미지 로드 수행 실시

투케이2K 2021. 6. 29. 09:20

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

<!DOCTYPE HTML>
<!-- 자바스크립트 차단된 콘텐츠 자동 허용 실시 -->
<!-- saved from url=(0013)about:internet -->

<!-- 표시 언어 지정 -->
<html lang="ko">

<!-- 헤더 정의 부분 -->
<head>
    <title>HTML TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    

    <!-- 내부 CSS 스타일 지정 -->
    <style>
		/* 
		[CSS 요소 설명] 
		1. font-family : 폰트 표시 형태 스타일 지정
		2. width : 가로 크기 지정
		3. height : 세로 크기 지정
		4. margin : 마진 (외부) 여백 설정
		5. padding : 패딩 (내부) 여백 설정
		6. border : 테두리 (선) 표시 설정
		7. background : 배경 표시 설정
		8. overflow : 범위를 벗어난 콘텐츠 표시 여부 설정 (스크롤)
		9. float : 정렬 기준 설정
		10. div : 레이아웃 표시 블록
		11. position : 레이아웃 위치 정렬 설정
		12. display : 해당 div 영역을 표시 여부 설정		
		13. vertical-align : middle; : 테이블 셀 영역에서 텍스트 수직 정렬 설정
		14. table-layout : 표 크기 고정 실시
		15. font-size : 텍스트 사이즈 지정
		16. white-space : 스페이스와 탭, 줄바꿈, 자동 줄바꿈 처리 설정	
		17. text-overflow : 텍스트 초과 시 설정
		18. background-image : 배경 이미지 설정
		19. cursor : 커서 스타일 설정
		*/
				    			 	
    	

		/* html, body 영역 스타일 지정 */
		html, body{
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;	
			
			/* 스크롤바 표시 지정 */
			overflow : auto;					
		}
		
		

		/* body 스크롤바 메인 스타일 지정 */
		body::-webkit-scrollbar {
			/* 스크롤바 너비 지정 */
			width: 10px;
			
			/* 스크롤바 배경 색상 지정 */
			background-color: #c1c1c1;
		}
		/* body 스크롤바 thumb 스타일 지정 */
		body::-webkit-scrollbar-thumb {					
			/* 스크롤바 thumb 색상 지정 */
			background-color: #444444;
		}



		#image_container {			
			width : 40%; 
			height : 50%; 
			margin : 0 auto;
			padding : 0;
			border : 1px solid #000000;
			/* background-color : #000000; */
					
			/* 컨테이너 배치 정렬 실시 */
			float : top;
			position : relative; 
			top : 15%;
			left : 0%;
			
			/* 마우스 커서 스타일 지정 */
			cursor : pointer;	

			/*  브라우저에서 화면 터치 시 파란박스 하이라이트 제거 */
			-webkit-tap-highlight-color : rgba(0,0,0,0);  

			/* div 영역 원형 설정 */
			border-radius : 20px;
		}



		#btn_container{
			width : 40%;
			height : 10%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : #000000;

			/* 브라우저에서 화면 터치 시 파란박스 하이라이트 제거 */
			-webkit-tap-highlight-color : rgba(0,0,0,0);

			/* div 테두리 영역 둥글게 설정 */
			border-radius : 20px;

			/* position 위치 설정 */
			float : top;
			position : relative; 
			top : 18%;
			left : 0%;

			/* 커서 스타일 지정 */
			cursor: pointer;
			
			/* display 설정 : 텍스트 수직 정렬 */
			display : table; 
			
			/* 텍스트 내용 길면 숨김 처리 하기 위함 */
			table-layout: fixed;
		}
		#btn_txt{
			/* 텍스트 가로 정렬 지정 */
			text-align : center; 
			
			/* 텍스트 색상 지정 */
			color : #ffffff;
			
			/* 텍스트 굵기 지정 */
			font-weight : bold;
			
			/* 텍스트 사이즈 지정 */        	
			font-size : 150%;
        	
			/* 텍스트 수직 정렬 실시 */        	        	 	
			display : table-cell;
			vertical-align : middle;
			
			/* 텍스트 내용 길면 숨김 처리*/
			overflow : hidden;
			text-overflow : ellipsis;
			white-space : nowrap;
			
			/* 태그 밑줄 없애기 */
			text-decoration : none;		
		}
		      				                          
    </style>


    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. document.getElementById : 특정 객체 id를 지정합니다
    	2. canvas.getContext : 캔버스 설정을 수행합니다
    	3. div.clientWidth : 특정 객체 크기를 확인합니다
    	4. new Image : 이미지 객체를 선언합니다
    	*/



    	/* [이벤트 수행 함수] */
    	function createImageFile(){
    		console.log("");
    		console.log("[createImageFile] : [start]"); 
    		console.log("");

    		// 객체 선언 실시    		
    		var divId = "image_container";
    		var cavasId = "canvas";

    		var canvas = document.getElementById(cavasId);
    		var ctx = canvas.getContext("2d");

    		var div = document.getElementById(divId);


    		//캔버스 사이즈 지정 실시 
    		var width = div.clientWidth - 20;
    		var height = div.clientHeight - 20;
    		canvas.height = height;
    		canvas.width = width;
    		console.log("");
    		console.log("[createImageFile] : [width] : " + width); 
    		console.log("[createImageFile] : [height] : " + height); 
    		console.log("");


    		//캔버스에 이미지 지정 실시    		
    		var imgSrc = "../WebProject/assets/image/black_lib_icon.png";    		
    		var img = new Image();
    		img.onload = function(){
    			ctx.drawImage(img, 20, 20, width, height); //이미지, x좌표, y좌표, 가로크기, 세로크기 
    		}
    		img.src = imgSrc;
    	};
    	
    </script>

</head>


<body>

<!-- 이미지 컨테이너 -->
<div id = "image_container">
	<canvas id = "canvas"></canvas>
</div>
   


<!-- 버튼 레이아웃 -->
<div id = "btn_container" onclick="createImageFile();">
	<p id = "btn_txt">이미지 호출</p>
</div>

</body>

</html>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. document.getElementById : 특정 객체 id를 지정합니다

2. canvas.getContext : 캔버스 설정을 수행합니다

3. div.clientWidth : 특정 객체 크기를 확인합니다

4. new Image : 이미지 객체를 선언합니다

*/

/* =========================== */

 

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

81. (javascript/자바스크립트) 특정 객체 강제 버튼 클릭 이벤트 수행 - document getElementById onclick  (0) 2021.06.30
80. (javascript/자바스크립트) 특정 객체 크기, 위치 확인-offsetWidth, clientWidth, scrollWidth, getBoundingClientRect  (0) 2021.06.30
78. (javascript/자바스크립트) Array 배열 특정 데이터 삭제 및 특정 key 값 삭제 실시 - indexOf , findIndex , splice  (0) 2021.06.28
77. (javascript/자바스크립트) background Image 배경 이미지 경로 확인 및 이미지 변경 코드  (0) 2021.06.28
76. (javascript/자바스크립트) object innerHTML 사용해 다른 html 파일 내부에 로드 실시  (0) 2021.06.27
'JavaScript' Related Articles more
Comments