실습문제 1) fillStyle(), shadow(), lineTo()를 사용하여 다음과 같은 페이지를 작성하라.
- 캔버스의 크기 : 가로 300, 세로 300
- 그림자 : 가로 30, 세로 30만큼 떨어진 곳에 10픽셀만큼 생성
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
31
32
33
34
35
36 | <!DOCTYPE html>
<html>
<head>
<title>실습과제1</title>
<style type="text/css">
canvas {border:1px solid gray}
</style>
</head>
<body>
<canvas Id="cvs" width="300" height="300"></canvas>
<script type ="text/javascript">
var wpcanvas = document.getElementById("cvs");
var wpcontext=wpcanvas.getContext("2d");
wpcontext.beginPath();
wpcontext.moveTo(50,75);
wpcontext.lineTo(150,25);
wpcontext.lineTo(125,75);
wpcontext.lineTo(150,125);
wpcontext.fillStyle="orange";
wpcontext.shadowColor="gray";
wpcontext.shadowBlur=20;
wpcontext.shadowOffsetX=30;
wpcontext.shadowOffsetY=30;
wpcontext.closePath();
wpcontext.fill();
</script>
</body>
</html> |
실습문제 2) drag and drop API를 사용하여 다음과 같은 페이지를 작성하시오.
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 | <html>
<head>
<title>실습과제2</title>
<style type="text/css">
div {width:500px; height:100px; border:1px solid gray; text-align:center;}
h2 {font-weight:bold;}
img {width:150px; height:100px;}
</style>
</head>
<body>
<script type="text/javascript">
function dragover(wpevent)
{wpevent.preventDefault();}
function dragstart(wpevent)
{wpevent.dataTransfer.effectAllowed='move';
wpevent.dataTransfer.setData("Text",wpevent.target.id);}
function dragend(wpevent)
{wpevent.dataTransfer.clearData("Text");}
function drop(wpevent)
{wpevent.preventDefault();
var item=wpevent.dataTransfer.getData("Text");
var data=document.getElementById(item);
wpevent.target.appendChild(data);
wpevent.stopPropagation();
document.getElementById("result").innerHTML = data.title+"를 옮겼습니다.";
}
</script>
<h2>과일목록</h2>
<div ondrop="drop(event)" ondragover="dragover(event)" >
<img src="apple.jpg" id="item1" draggable="true" ondragstart="dragstart(event)"
ondragend="dragend(event)" title="사과"></img>
<img src="cherry.jpg" id="item2" draggable="true" ondragstart="dragstart(event)"
ondragend="dragend(event)" title="체리"></img>
<img src="grape.jpg" id="item3" draggable="true" ondragstart="dragstart(event)"
ondragend="dragend(event)" title="포도"></img>
</div><p>
<h2>장바구니</h2>
<div ondrop="drop(event)" ondragover="dragover(event)"></div>
<h3 id="result"></h3>
</body>
</html> |
(이미지 3개 같은 폴더 안에 넣어줘야함.)
캔버스는 움직이지도 않고 조금 실망스러웠다. 뭐 기능을 넣으면 된다지만 단순 그리기만 하는 API가 왜 필요한지 이해가 안감.
innerHTML은 생각도 못해본 기능인데 좋은 기능 같음.
드래그 API는 프로젝트 때문에 찾고 있던 API인데 활용도 높을듯하다. HTML5는 이래저래 신기한 기능도 많고 재미있는듯. 근데 웹쪽은 별로 관심이 없어서..
하이라이터도 바꿔야되나.. javascript부분은 왜 안나오지..ㅜ
실습과제1.html
