666 No

[동영상강의] javascript07_그래픽처리( canvas 태그, 선 그리기, 도형 그리기, 이미지 출력, 애니메이션

2017-09-03 18:46:12 By 머나먼나라 0 2024 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

arc.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
canvas=document.getElementById("myCanvas"); //도화지
context=canvas.getContext("2d"); //붓
context.beginPath(); //경로 초기화
// 원점의 x,y좌표, 반지름, 시작각도, 끝각도, 회전방향
// 회전방향 : false(시계방향), true(반시계방향)
// 2.0 * Math.PI 360도, 1.0 * Math.PI 180도
// 1.5 * Math.PI 270도
context.arc(100,100,80,0,1.0*Math.PI, true);
context.fillStyle = "red"; //색상 설정 
context.fill(); //색칠
context.beginPath();
context.arc(100,100,60,0,1.5*Math.PI, false);
context.fillStyle = "blue";
context.fill();
context.beginPath();
context.arc(100,100,40,0,1.5*Math.PI, false);
context.fillStyle = "green";
context.fill();
</script>
</body>
</html>

ball.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
canvas {
  background-color: yellow;
  border: 1px dotted black;
}
</style>
<script>
//전역변수
	var context;
	var dx = 5; //x증가값
	var dy = 5; //y증가값
	var y = 100; //시작좌표
	var x = 100; //시작좌표
	function draw() {
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		//캔버스 지우기, 사각영역 지우기
		context.clearRect(0, 0, 300, 200);
		context.beginPath();
		context.fillStyle = "red";
		// 원그리기 x,y,반지름,시작각도,끝각도,반시계방향
		context.arc(x, y, 10, 0, Math.PI * 2, true);
		context.closePath();
		context.fill();
		if (x < (0 + 10) || x > (300 - 10)) { //좌우 벽처리
			dx = -dx; //방향 전환 효과
		}
		if (y < (0 + 10) || y > (200 - 10)) { //상하 벽처리
			dy = -dy; //방향 전환 효과
		}
		x += dx; // x좌표 이동
		y += dy; // y좌표 이동
	}
	//setTimeout(draw, 10);
	setInterval(draw, 10); //10 밀리세컨드마다 반복호출
	// x,y축 이동거리를 변경하는 함수
	function change() {
		// parseInt( 스트링 ) 스트링을 숫자로 바꿔주는 함수
		dx = parseInt(document.getElementById("hSpeed").value);
		dy = parseInt(document.getElementById("vSpeed").value);
	}
</script>
</head>
<body>
  <canvas id="myCanvas" width="300" height="200"></canvas>
  <form id="form1">
    x축 이동거리
    <input type="number" id="hSpeed" value="5" min="1" max="10">
    y축 이동거리
    <input type="number" id="vSpeed" value="5" min="1" max="10">
    <input type="button" value="확인" onclick="change()">
  </form>
</body>
</html>

canvas.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 캔버스 태그(도화지에 해당) -->
<canvas id="myCanvas" width="200" height="100"
style="border: 1px solid red;">
</canvas>
<script>
canvas = document.getElementById("myCanvas");//캔버스객체
context = canvas.getContext("2d"); //컨텍스트 객체(붓)
context.fillStyle = "#ffff00";//색상 설정
// x,y,width,height
//context.fillRect(0,0,100,50);//사각형 그리기
context.rect(0,0,100,50);//사각형 그리기
context.strokeStyle = "green"; //테두리 색상
context.stroke(); //테두리 그리기
</script>
</body>
</html>

gra1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
// (0,0)좌표부터 (200,0) 좌표까지 점진적으로 색상이 변화
gradient = context.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"yellow"); //시작 색상
gradient.addColorStop(0.5,"red");
gradient.addColorStop(1,"blue"); //끝 색상
context.fillStyle=gradient; // 페인트 색상 설정
context.fillRect(10,10,180,90); //사각형 출력
</script>
</body>
</html>

gra2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
canvas= document.getElementById("myCanvas");
context = canvas.getContext("2d");
context.arc(70,50,10,0,2.0*Math.PI, false);
context.arc(80,60,120,0,2.0*Math.PI, false);
context.stroke();
//원형 그라데이션 효과
// x1,y1,r1, x2,y2,r2
gradient = 
	context.createRadialGradient(70,50,10,80,60,120);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"red");
context.fillStyle=gradient; //페인트 스타일 지정
context.fillRect(0,0,200,200); // 사각형 출력
</script>
</body>
</html>

image.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- <img id="img" src="../images/tomato.jpg" onload="alert('이미지가 화면에 출력되었습니다.')"> -->
<!-- <img id="img" src="../images/apple.gif" onload=""  > -->
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
canvas=document.getElementById("myCanvas");
context=canvas.getContext("2d");
image=new Image(); //이미지 객체 생성
image.src = "../images/tomato.jpg"; //이미지 소스 지정
//이미지가 로딩되면 캔버스에 이미지 출력
image.onload = function(){
	context.drawImage(image,0,0);
};
/* img = document.getElementById("img");
img.onload = function(){
	alert("이미지가 로딩되었습니다.");
} */


</script>
</body>
</html>

line.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function test(){
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	context.setLineDash([5,5]); //선 크기, 공백 크기
	context.strokeStyle = "green";
	context.beginPath(); //경로 초기화
	context.moveTo(0,0); //좌표 이동
	context.lineWidth = 20; //선의 두께
	context.lineTo(100,100); //선 그리기
	context.stroke(); //선이 그려짐
	context.lineWidth = 10;
	context.beginPath();
	context.moveTo(100,100);
	context.strokeStyle = "red";
	context.lineTo(150,50);
	context.lineTo(200,100);
	context.stroke();
}
</script>
</head>
<body onload="test()">
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

text.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
canvas = document.getElementById("myCanvas"); //도화지
context = canvas.getContext("2d"); //붓
context.font = "italic 40pt Arial"; //폰트 설정
//context.strokeStyle = "blue"; //텍스트 색상 설정
//context.strokeText("Hello World", 20, 100);//텍스트 출력
context.fillStyle = "red";
context.fillText("Hello World", 20, 100);//텍스트 출력


</script>
</body>
</html>