HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
	var canvas = document.getElementById('canvas');
	if(canvas.getContext){ 
		var context = canvas.getContext('2d');
		
		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>

결과




'프로그래밍 > html,css,javascript,jsp' 카테고리의 다른 글

[jquery]id 값이 없는 마커 이미지 회전시키기  (0) 2020.10.29
[javascript] div 추가할때 따옴표 관리  (0) 2020.10.07
HTML5 예제와 연습 캔버스 곡선 그리기  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 color  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (3) 라디안 매스함수  (0) 2018.12.19

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
	var canvas = document.getElementById('canvas');
	if(canvas.getContext){ 
		var context = canvas.getContext('2d');
		
		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>

결과





'프로그래밍 > html,css,javascript,jsp' 카테고리의 다른 글

[javascript] div 추가할때 따옴표 관리  (0) 2020.10.07
HTML5 예제와 연습 캔버스 곡선 그리기(2)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 color  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (3) 라디안 매스함수  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (2)  (0) 2018.12.19

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
	var canvas = document.getElementById('canvas');
	if(canvas.getContext){ 
		var context = canvas.getContext('2d');
		
	//객체로부터 그림자가 y축 방향으로 얼마나 떨어져 있는가를 나타냄. 기본값, 0이며 음수이면 위쪽에 그림자가 생김
	context.shadowOffsetY = 10;
	
	//그림자가 얼마나 흐릿한가를 나타냄. 기본값 0
	context.shadowBlur=25;
	
	//그림자 색상을 지정하는데 기본값은 완전히 투명한 검정색
	context.shadowColor='#000000';
		
	context.fillRect(10,10,100,100);
	
	
	
	}else{
		alert('브라우저가 캔버스를 지원하지 않습니다.');		
	}
	
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>

결과











HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
	var canvas = document.getElementById('canvas');
	if(canvas.getContext){ 
		var context = canvas.getContext('2d');
		
	context.fillStyle = 'rgb(200,0,0)';
	context.fillRect(10,10,100,100);
	
	//16진수 색상 코드
	context.fillStyle='#0c30c3';
	context.fillRect(50,50,100,100);
	
	context.beginPath();
	context.arc(250,90,80,0,Math.PI*2,true);
	context.closePath();
	context.fillStyle = 'Yellow';
	context.strokeStyle='blue';
	context.fill();
	context.stroke();
	
		
	}else{
		alert('브라우저가 캔버스를 지원하지 않습니다.');		
	}
	
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>


결과





'프로그래밍 > html,css,javascript,jsp' 카테고리의 다른 글

HTML5 예제와 연습 캔버스 곡선 그리기(2)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 곡선 그리기  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (3) 라디안 매스함수  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (2)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (표정그려보기)  (0) 2018.12.19

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
	var canvas = document.getElementById('canvas');
	if(canvas.getContext){ 
		var context = canvas.getContext('2d');
		
	/* 
	arc메서드에서 각도는 도(degree)로 표시하지 않고 라디안 값으로 표기함
	1라디안 은 180/Math.PI, 60도 (Math.PI/180)*60 , 360도 (Math.PI *2)
							1.5파이(270도)
									|
									|
									|
					1파이(180도) ---중심점 --- 0파이,2파이(0도,260도)
									|
									|
									|
								0.5파이(90도)
				//(70,70)에서 반시계방향으로 반지름 20픽셀인 원을 그리는데 , 60도 까지만 그리고 태두리만 표시
				
	*/
	
	
	context.beginPath();
	context.arc(70,70,20,0,(Math.PI/180)*60,true);
	context.stroke();
	
	context.beginPath();
	context.arc(130,110,50,0,Math.PI*2,true);
	context.closePath(); //360e도 이기때문에 생략 가능
	context.fillStyle ='rgb(0,200,200)';
	context.fill();
	context.stroke();
	
	context.beginPath();
	context.arc(190,70,20,(Math.PI/180)*110,(Math.PI/180)*170,true);
	context.stroke();	
	
	}else{
		alert('브라우저가 캔버스를 지원하지 않습니다.');		
	}
	
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>

결과







































'프로그래밍 > html,css,javascript,jsp' 카테고리의 다른 글

HTML5 예제와 연습 캔버스 곡선 그리기  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 color  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (2)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (표정그려보기)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 fillRect(3)  (0) 2018.12.19

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
	var canvas = document.getElementById('canvas');
	if(canvas.getContext){ 
		var 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>


결과







'프로그래밍 > html,css,javascript,jsp' 카테고리의 다른 글

HTML5 예제와 연습 캔버스 그리기 color  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (3) 라디안 매스함수  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (표정그려보기)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 fillRect(3)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 fillRect(2)  (0) 2018.12.19

path


HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
	var canvas = document.getElementById('canvas');
	if(canvas.getContext){ 
		var context = canvas.getContext('2d');
		/* 
		선 그리기
		1. 패스 시작
		2. 지정한 패스를 그리기/채우기 메서드 이용
		3. 패스 닫기
		*/
		
		context.beginPath(); //path 시작
		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>


결과











'프로그래밍 > html,css,javascript,jsp' 카테고리의 다른 글

HTML5 예제와 연습 캔버스 그리기 (3) 라디안 매스함수  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (2)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 fillRect(3)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 fillRect(2)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 fillRect(1)  (0) 2018.12.19

fillRect(3)


HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
	var canvas = document.getElementById('canvas');
	if(canvas.getContext){ 
		//Context 객체가 그림을 그려줌
		var context = canvas.getContext('2d');
		//채우기 색상 지정
		context.fillStyle ='rgb(200,0,0)';
		//색이 칠해져 있는 사각형
		context.fillRect(10,10,100,100); //x,y,w,h
		
		//채우기 색상 및 투명도 지정
		context.fillStyle = 'rgba(0,0,200,0.5)';
	
		context.fillRect(50,50,100,100); //x,y,w,h
		
		//특정 영역을 지우고 완전 투명
		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>


결과






'프로그래밍 > html,css,javascript,jsp' 카테고리의 다른 글

HTML5 예제와 연습 캔버스 그리기 (2)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 (표정그려보기)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 fillRect(2)  (0) 2018.12.19
HTML5 예제와 연습 캔버스 그리기 fillRect(1)  (0) 2018.12.19
HTML5 예제와 연습 vidio audio 추가하기.  (0) 2018.12.19

+ Recent posts

티스토리툴바