JavaScript/6. HTML5 캔버스 그래픽
Day 49 : Exercise
pancakemaker
2021. 12. 24. 13:19
[이론문제]
3. 다음과 같은 태그가 있을 때 주석에 맞도록 빈 라인에 자바스크립트 코드를 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3번 문제</title>
</head>
<body>
<canvas id="can" width="300" height="300" style="background-color: aliceblue;"></canvas>
<script>
//(1) 캔버스 DOM 객체를 알아낸다.
var canvas = document.getElementById("can");
//(2) 그래픽 컨텍스트 객체를 알아낸다.
var context = canvas.getContext("2d");
//(3) 경로를 새로 구성한다.
context.beginPath();
//(4) (10, 10)을 시작점으로 입력한다.
context.moveTo(10, 10);
//(5) (50, 50)까지 직선을 만든다.
context.lineTo(50, 50);
//(6) 경로에 있는 직선을 캔버스에 그린다.
context.stroke();
</script>
</body>
</html>
[실습문제]
1. 다음 HTML 페이지와 출력 결과를 참고하여 원을 그리는 drawCircle() 함수를 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>drawCircle() 만들기</title>
<script>
function drawCircle(ctx, x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2*Math.PI);
ctx.stroke();
}
</script>
</head>
<body>
<h3>drawCircle() 만들기</h3>
<hr>
<canvas id="myCanvas" width="300" height="220" style="background-color: aliceblue;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
drawCircle(context, 100, 100, 80);
drawCircle(context, 150, 150, 30);
</script>
</body>
</html>
2. 다음 HTML 페이지와 출력 결과를 참고하여 다각형을 그리는 drawPolygon()을 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>drawPolygon() 만들기</title>
<script>
function drawPolygon(ctx, xArray, yArray) {
ctx.beginPath();
for(var i=0; i<xArray.length; i++) {
xs = xArray[i];
ys = yArray[i];
}
ctx.moveTo(xArray[0], yArray[0]);
for(var i=1; i<xArray.length; i++) {
ctx.lineTo(xArray[i], yArray[i]);
}
ctx.lineTo(xArray[0], yArray[0]);
ctx.strokeColor = "black";
ctx.stroke();
}
</script>
</head>
<body>
<h3>drawPolygon() 만들기</h3>
<hr>
<canvas id="myCanvas" width="220" height="220" style="background-color:aliceblue;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var xs = [100, 10, 150, 210];
var ys = [10, 100, 200, 60];
drawPolygon(context, xs, ys);
</script>
</body>
</html>
3. 올림픽 오륜기를 캔버스에 출력하는 웹 페이지를 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>오륜기 그리기</title>
</head>
<body>
<h3>오륜기 그리기</h3>
<hr>
<canvas id="myCanvas" width="270" height="130" style="background-color: aliceblue;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle = "skyblue";
context.arc(70, 50, 30, 0, 2*Math.PI, false);
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.strokeStyle = "black";
context.arc(135, 50, 30, 0, 2*Math.PI, false);
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.strokeStyle = "red";
context.arc(200, 50, 30, 0, 2*Math.PI, false);
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.strokeStyle = "yellow";
context.arc(100, 80, 30, 0, 2*Math.PI, false);
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.strokeStyle = "green";
context.arc(170, 80, 30, 0, 2*Math.PI, false);
context.lineWidth = 3;
context.stroke();
</script>
</body>
</html>
4. 캔버스를 이용하여 자신의 사진 위에 자신의 이름을 출력하는 웹 페이지를 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사진과 이름 출력</title>
</head>
<body>
<h3>사진과 이름 출력</h3>
<hr>
<canvas id="myCanvas" width="300" height="200" style="background-color: aliceblue;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image(); //Image 객체 생성
img.src = "media/elsa.png"; //img의 src를 텍스트보다 먼저 줘야 텍스트가 이미지 위로 올라옴 (이미지가 먼저 그려진 후 텍스트가 그려짐)
img.onload = function() {
context.drawImage(img, 20, 20, 200, 150);
context.font = "italic 50px forte";
context.strokeStyle = "magenta";
context.lineWidth = 2;
context.textAlign = "left";
context.fillStyle = "violet";
context.fill();
context.fillText("Elsa", 150, 180);
context.strokeText("Elsa", 150, 180); //fillText와 strokeText를 같이 쓰면 외곽선도 있고 채우기도 있는 텍스트 출력
}
</script>
</body>
</html>
5. 폼으로부터 여러 속성을 입력받아 캔버스에 사각형을 그리는 웹 페이지를 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼으로 도형 그리기</title>
<style>
td {
padding-bottom: 0px;
padding-top: 0px;
}
</style>
</head>
<body>
<h3>폼으로 사각형 그리기</h3>
<hr>
<table>
<tr><td style="text-align: right;"><p>x</p></td><td>
<input type="text" value="" id="x"></td>
<td style="text-align: right;"><p>y</p></td><td>
<input type="text" value="" id="y"></td></tr>
<tr><td style="text-align: right;"><p>width</p></td><td>
<input type="text" value="" id="w"></td>
<td style="text-align: right;"><p>height</p></td><td>
<input type="text" value="" id="h"></td></tr>
<tr><td style="text-align: right;"><p>선굵기</p></td><td>
<input type="text" value="" id="line"></td>
<td><p style="text-align: right;">선색</p></td><td>
<input type="color" value="" id="colors"></td></tr>
<tr><td>
<tr><td><p></p></td><td style="padding-left: 120px;">
<input type="button" value="그리기" onclick="draw()"></td>
<td><p></p></td><td style="padding-left: 120px;">
<input type="button" value="지우기" onclick="erase()"></td></tr>
</table>
<canvas id="myCanvas" style="background-color:aliceblue;" width="500" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
function draw(x, y, w, h) {
context.beginPath();
var xValue = document.getElementById("x");
var x = xValue.value;
var yValue = document.getElementById("y");
var y = yValue.value;
var wValue = document.getElementById("w");
var w = wValue.value;
var hValue = document.getElementById("h");
var h = hValue.value;
var lineValue = document.getElementById("line");
var lines = lineValue.value;
var colorValue = document.getElementById("colors");
var colors = colorValue.value;
context.rect(x, y, w, h);
context.lineWidth = lines;
context.strokeStyle = colors;
context.stroke();
}
function erase() {
context.clearRect(0, 0, canvas.width, canvas.height);
var xValue = document.getElementById("x");
xValue.value = "";
var yValue = document.getElementById("y");
yValue.value = "";
var wValue = document.getElementById("w");
wValue.value = "";
var hValue = document.getElementById("h");
hValue.value = "";
var lineValue = document.getElementById("line");
lineValue.value = "";
var colorValue = document.getElementById("colors");
colorValue.value = "";
context.beginPath();
}
</script>
</body>
</html>
6. 폼으로부터 여러 속성을 입력받아 캔버스에 원호를 그리는 웹 페이지를 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼으로 도형 그리기</title>
<style>
td {
padding-bottom: 0px;
padding-top: 0px;
}
</style>
</head>
<body>
<h3>폼으로 원호 그리기</h3>
<hr>
<table>
<tr><td style="text-align: right;"><p>x</p></td><td>
<input type="text" value="" id="x"></td>
<td style="text-align: right;"><p>y</p></td><td>
<input type="text" value="" id="y"></td></tr>
<tr><td style="text-align:right;"><p>반지름</p></td><td>
<input type="text" value="" id="rad"></td>
<td style="text-align: right;"><p>방향</p></td><td>
<select name="clock" id="clock">
<option value="1" selected>시계방향</option>
<option value="2">반시계방향</option>
</select>
<tr><td style="text-align: right;"><p>시작각도</p></td><td>
<input type="text" value="" id="start"></td>
<td style="text-align: right;"><p>끝각도</p></td><td>
<input type="text" value="" id="end"></td></tr>
<tr><td style="text-align: right;"><p>선굵기</p></td><td>
<input type="text" value="" id="line"></td>
<td><p style="text-align: right;">선색</p></td><td>
<input type="color" value="" id="colors"></td></tr>
<tr><td>
<tr><td><p></p></td><td style="padding-left: 120px;">
<input type="button" value="그리기" onclick="draw()"></td>
<td><p></p></td><td style="padding-left: 120px;">
<input type="button" value="지우기" onclick="erase()"></td></tr>
</table>
<canvas id="myCanvas" style="background-color:aliceblue;" width="1000" height="1000"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
function draw(x, y, rad, startAngle, endAngle, anticlockwise) {
context.beginPath();
var xValue = document.getElementById("x");
var x = xValue.value;
var yValue = document.getElementById("y");
var y = yValue.value;
var radValue = document.getElementById("rad");
var rad = radValue.value;
var clockValue = document.getElementById("clock");
if(clockValue.options[clockValue.selectedIndex].value == "1") {
var anticlockwise = false;
} else {
var anticlockwise = true;
}
var startValue = document.getElementById("start");
var startAngle = startValue.value;
var endValue = document.getElementById("end");
if(endValue.value == "90") {
endValue.value = 0.5*Math.PI;
var endAngle = endValue.value;
} else if(endValue.value == "180") {
endValue.value = Math.PI;
var endAngle = endValue.value;
} else if(endValue.value == "270") {
endValue.value = 1.5*Math.PI;
var endAngle = endValue.value;
} else if(endValue.value == "360") {
endValue.value = 2*Math.PI;
var endAngle = endValue.value;
} else {
alert("90, 180, 270, 360 중 입력해주세요.");
return;
}
var lineValue = document.getElementById("line");
var lines = lineValue.value;
var colorValue = document.getElementById("colors");
var colors = colorValue.value;
context.arc(x, y, rad, startAngle, endAngle, anticlockwise);
context.lineWidth = lines;
context.strokeStyle = colors;
context.stroke();
}
function erase() {
context.clearRect(0, 0, canvas.width, canvas.height);
var xValue = document.getElementById("x");
xValue.value = "";
var yValue = document.getElementById("y");
yValue.value = "";
var radValue = document.getElementById("rad");
radValue.value = "";
var clockValue = document.getElementById("clock");
clockValue.value = "1";
var startValue = document.getElementById("start");
startValue.value = "";
var endValue = document.getElementById("end");
endValue.value = "";
var lineValue = document.getElementById("line");
lineValue.value = "";
var colorValue = document.getElementById("colors");
colorValue.value = "";
context.beginPath();
}
</script>
</body>
</html>
7. 캔버스에 마우스를 누르고 드래그하여 마우스를 놓으면 선이 그려지는 웹 페이지를 작성하라. 마우스를 누르면 이전 선은 지워지고 드래그하여 마우스를 놓으면 새 선이 그려진다. 마우스를 드래그하는 동안 선의 모양이 계속 보이도록 하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mousedown과 mouseup으로 선 그리기</title>
</head>
<body onload="init()">
<h3>mousedown과 mouseup으로 선 그리기</h3>
<hr>
<canvas id="myCanvas" style="background-color:aliceblue" width="700" height="300"></canvas>
<script>
var canvas, context;
function init() {
canvas = document.getElementById("myCanvas"); //캔버스 객체 찾기
context = canvas.getContext("2d"); //컨텍스트는 2차원 그래픽으로 지정
context.lineWidth = 2; // 선 굵기를 2로 설정
context.strokeStyle = "blue"; // 선 색은 파란색으로 지정
// 마우스 리스너 등록. e는 MouseEvent 객체
canvas.addEventListener("mousemove", function (e) { move(e) }, false);
canvas.addEventListener("mousedown", function (e) { down(e) }, false);
canvas.addEventListener("mouseup", function (e) { up(e) }, false);
canvas.addEventListener("mouseout", function (e) { out(e) }, false);
}
var startX=0, startY=0; // 마우스의 마지막 포인터 좌표
var dragging = false;
function draw(curX, curY) {
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(curX, curY);
context.stroke();
}
function down(e) {
startX = e.offsetX; startY = e.offsetY;
dragging = true; //마우스가 눌러질 때 드래깅 중
}
function up(e) { dragging = false; } //마우스가 놓여졌으므로 드래깅 끝
function move(e) {
if(!dragging) return; // 마우스가 눌러지지 않았으면(드래깅 중이 아니라면) 리턴
//마우스가 눌러졌다면 (드래깅 중이라면)
var curX = e.offsetX, curY = e.offsetY; //현재 마우스의 위치값 저장
draw(curX, curY); //선 그림
startX = curX; startY = curY;
}
function out(e) { dragging = false; } //마우스가 캔버스 영역을 벗어남
</script>
</body>
</html>
8. 선의 굵기와 선 색을 선택하고 마우스 드래깅으로 캔버스에 그림을 그릴 수 있는 웹 페이지를 작성하라. 예제 11-11을 참고하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>캔버스에 마우스 드래깅</title>
</head>
<body onload="init()">
<h3>마우스를 누른 채 드래깅하여 그림을 그려 보세요.</h3>
<hr>
<canvas id="myCanvas" style="background-color:aliceblue" width="700" height="300"></canvas>
<br>
선굵기: <input type="text" value="1" style="width: 50px;" id="lines">
선 색: <input type="color" value="black" id="colors">
<script>
var canvas, context;
function init() {
canvas = document.getElementById("myCanvas"); //캔버스 객체 찾기
context = canvas.getContext("2d");
// 마우스 리스너 등록. e는 MouseEvent 객체
canvas.addEventListener("mousemove", function (e) { move(e) }, false);
canvas.addEventListener("mousedown", function (e) { down(e) }, false);
canvas.addEventListener("mouseup", function (e) { up(e) }, false);
canvas.addEventListener("mouseout", function (e) { out(e) }, false);
}
var startX=0, startY=0; // 마우스의 마지막 포인터 좌표
var dragging = false;
function draw(curX, curY) {
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(curX, curY);
var lineValue = document.getElementById("lines"); //선 굵기 개체의 입력값 찾기
var lines = lineValue.value;
var colorValue = document.getElementById("colors"); //선 색 개체의 입력값 찾기
var colors = colorValue.value;
context.lineWidth = lines;
context.strokeStyle = colors;
context.stroke();
}
function down(e) {
startX = e.offsetX; startY = e.offsetY;
dragging = true; //마우스가 눌러질 때 드래깅 중
}
function up(e) { dragging = false; } //마우스가 놓여졌으므로 드래깅 끝
function move(e) {
if(!dragging) return; // 마우스가 눌러지지 않았으면(드래깅 중이 아니라면) 리턴
//마우스가 눌러졌다면 (드래깅 중이라면)
var curX = e.offsetX, curY = e.offsetY; //현재 마우스의 위치값 저장
draw(curX, curY); //선 그림
startX = curX; startY = curY;
}
function out(e) { dragging = false; } //마우스가 캔버스 영역을 벗어남
</script>
</body>
</html>
9. 마우스를 누르지 않고 자유롭게 움직이면서 캔버스에 그림을 그리는 웹 페이지를 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mousemove로 자유롭게 그리세요.</title>
</head>
<body onload="init()">
<h3>mousemove로 자유롭게 그리세요.</h3>
<hr>
선굵기: <input type="text" value="1" style="width: 50px;" id="lines">
선 색: <input type="color" value="black" id="colors">
<p>
<canvas id="myCanvas" style="background-color:aliceblue" width="500" height="300"></canvas>
<script>
var canvas, context;
function init() {
canvas = document.getElementById("myCanvas"); //캔버스 객체 찾기
context = canvas.getContext("2d");
// 마우스 리스너 등록. e는 MouseEvent 객체
canvas.addEventListener("mousemove", function (e) { move(e) }, false);
canvas.addEventListener("mouseover", function (e) { over(e) }, false);
canvas.addEventListener("mouseout", function (e) { out(e) }, false);
}
var startX=0, startY=0; // 마우스의 마지막 포인터 좌표
var dragging = false;
function draw(curX, curY) {
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(curX, curY);
var lineValue = document.getElementById("lines"); //선 굵기 개체의 입력값 찾기
var lines = lineValue.value;
var colorValue = document.getElementById("colors"); //선 색 개체의 입력값 찾기
var colors = colorValue.value;
context.lineWidth = lines;
context.strokeStyle = colors;
context.stroke();
}
function over(e) {
startX = e.offsetX; startY = e.offsetY;
dragging = true; //마우스가 눌러질 때 드래깅 중
}
//function up(e) { dragging = false; } //마우스가 놓여졌으므로 드래깅 끝
function move(e) {
if(!dragging) return; // 마우스가 눌러지지 않았으면(드래깅 중이 아니라면) 리턴
//마우스가 눌러졌다면 (드래깅 중이라면)
var curX = e.offsetX, curY = e.offsetY; //현재 마우스의 위치값 저장
draw(curX, curY); //선 그림
startX = curX; startY = curY;
}
function out(e) { dragging = false; } //마우스가 캔버스 영역을 벗어남
</script>
</body>
</html>