... //이곳에 img 객체에 로드된 이미지를 그리는 코드 작성 } img.src = "test.png"; // img 객체에 test.png 파일로부터 이미지 로딩 시작
이미지 로딩이 완료되어야 이미지를 그릴 수 있으므로, 이미지 로딩을 지시하기 전 img.onload 리스너에 이미지가 로딩되었을 때 이미지를 그리는 자바스크립트 코드를 등록해둔다.
이미지 그리기
이미지 로딩이 완료되면 컨텍스트 객체의 drawImage() 메서드를 이용하여 이미지를 그린다. drawImage() 는 다음 몇 가지 유형이 있다.
1. 원본크기로 그리기
원본 이미지 크기 그대로 그리는 drawImage() 는 다음과 같다 drawImage(img , dx , dy) . img : 이미지 객체 . dx , dy : 이미지가 그려질 캔버스 좌표 (dx , dy)
img 객체에 든 비트맵 이미지를 원본 크기로 캔버스의 (dx,dy) 위치에 그린다
2. 크기 조절하여 그리기
원본 이미지의 크기를 조절하여 그린는 drawImage()는 다음과 같다.
drawImage(img , dx , dy , dWidth , dHeight) : dWidth , dHeight : 이미지가 그려지는 크기 , dWidth X dHeight
: img 객체의 비트맵 이미지를 캔버스의 ( dx, dy) 위치에 dWidth X dHeight 크기로 변형하여 그린다.
3. 원본의 일부분을 크기 조절하여 그리기 원본 이미지의 일부분을 택하고 크기를 조절하여 그리는 drawImage()는 다음과 같다
drawImage(img , sx, sy , sWidth , sHeight ,dx , dy , dWidth , dHeight) sx, sy : img 이미지 내 비트맵 좌표 (sx , sy) sWidth, sHeight : 그리기 위해 선택한 img 내의 비트맵 크기 , sWidth X sHeight
img 이미지 내부의 (sx , sy) 위치에서 sWidth X sHeight 영역의 비트맵을 캔버스의 (dx , dy) 위치에 dWidth X dHeight 크기로 변형하여 그린다.
<title>이미지 그리기</title>
</head>
<body>
<h3>(20 , 20 ) 위치에 100 x 200 크기로 그리기</h3>
<hr>
<canvas id="myCanvas"
style="background-color: #44dd4433;"
width="300" height="250"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
context.drawImage(img,20,20,100,200);
}
img.src = "../images/elsa.png";
</script>
canvas 안에 이미지를 100 X 200 크기로 그려 넣은 것을 보여주고 있다.
drag and drop API
드래그 앤 드롭 API 는 웹 페이지 내의 요소를 사용자가 자유롭게 드래그 할 수 잇도록 설정해 줍니다.
. dataTransfer 객체 : 드래그 앤 드롭 이벤트를 위한 모든 이벤트 리스너 메서드는 DataTransfer 객체를 반환합니다.
이렇게 반환된 DataTransfer 객체는 드래그 앤 드롭 동작에 관한 정보를 가지고 잇게 됩니다.
. draggable 속성 : 웹페이지 내의 모든 요소는 draggable 속성을 사용하여 드래그 될 수 있는 객체(draggable object)로 변환될 수 있습니다.
. ondragstart 속성 : 드래그될 수 있는 객체로 만든 후에는 ondragstart 속성을 통해 DataTransfer 객체의 setData() 메서드를 호출합니다. setData() 메서드는 드래그되는 대상 객체의 데이터와 타입을 설정합니다.
. ondragover 속성 : ondragover 속성은 드래그 되는 대상 객체가 어느 요소 위에 놓일 수 있는지를 설정 합니다. 기본적으로는 HTML 요소는 다른 요소의 위에 위치할 수 없습니다. 따라서 다른 요소 위세 위치할 수 있도록 만들기 위해서는 놓일 장소에 있는 요소의 기본동작을 막아야만 합니다.
이 작업을 event.preventDefault() 메서드를 호출하는 것만드로 간단히 설정할 수 있습니다.
ondrop 속성 : 드래그하던 객체를 놓으면 drop 이벤트가 발생합니다. ondrop 속성을 이용하여 drop 이벤트에 대한 동작을 설정할 수 있습니다.
<title> 드래그 앤 드롭</title>
<style>
#shopping_cart{
width: 610px;
height: 100px;
padding: 10px;
border:1px dotted red;
}
img{
width: 100px;
height: 100px;
}
</style>
<script>
function allowDrop(ev){
ev.preventDefault();
// 기본적으로 요소나 데이터는 다른 요소에 drop 될수 없음
// drop 이 가능하도록 요소의 기본적인 속성을 차단함.
}
function drag(ev){
ev.dataTransfer.setData("text",ev.target.id);
// drop 이벤트가 발생하는 요소 id 의 text(img1,img2,,,)를 저장함
}
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
// 저장한 text 요소를 가져옴
ev.target.appendChild(document.getElementById(data));
// 가져온 text 를 target에 추가
}
</script>
</head>
<body>
<p> 원하는 상품을 카트에 담으세요</p>
<div id="shopping_cart" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
<img id="img1" src="../images/back1.jpg" draggable="true" ondragstart="drag(event)">
<img id="img2" src="../images/back2.jpg" draggable="true" ondragstart="drag(event)">
<img id="img3" src="../images/back3.jpg" draggable="true" ondragstart="drag(event)">
<img id="img4" src="../images/back4.jpg" draggable="true" ondragstart="drag(event)">
<img id="img5" src="../images/back5.jpg" draggable="true" ondragstart="drag(event)">
<img id="img6" src="../images/back6.jpg" draggable="true" ondragstart="drag(event)"><br>
<div id="shopping_cart" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
</body>
</html>
위에서 드래그앤 드롭을 실행하면 첫번째 사진처럼 화면에 나타난다 여기서 가방사진을
드래그해서 아래나 위로 옮겨주면 가방사진을 담을수 있다. 장바구니처럼 활용이 가능하다.
* Storage 사용
일반적으로 클라이언트 저장소를 생각하면 가장먼저 쿠키 저장소를 떠올리겠지만 html5 에는 좀더 효과적인 클라이언트 저장공간을 제공합니다.
- localStorage, sessionStorage API
html5 에서는 좀더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API 를 제공합니다. 둘 다 저장 공간으로 사용할 수 있는데 이둘의 가장 큰 차이점 이라면 저장소로서의 기능은 대부분 동일하며
단지 sessionStorage 의 경우 세션이 종료되면 저장된 데이터도 함께 사라진다는 점이 다른점 입니다.
스토리지가 사용되는 곳은 부분 임시적인 용도 또는 캐시 , history 기능을 위하여 사용됩니다.
<title>세션 스토리지에 쓰기/ 읽기</title>
</head>
<body>
<h3>세션 스토리지에 구입 리스트 저장 / 검색</h3>
<hr>
품목명 : <input id="item" type="text" size="10">
개수 : <input id="count" type="text" size="10">
<button id="sava" onclick="store()"> 저장</button>
<button id="retrieve" onclick="retrieve()">검색</button>
<script>
var item = document.getElementById("item");
var count = document.getElementById("count");
function store(){
if (!window.sessionStorage){
alert("세션 스토리지를 지원하지 않습니다.");
return;
}
sessionStorage.setItem(item.value,count.value);
// setItem(키,값)으로 세션 스토리지에 저장한 후,
}
function retrieve(){
if(!window.sessionStorage){
alert("세션 스토리지를 지원하지 않습니다.")
return;
}
var val = sessionStorage.getItem(item.value);
// getItem(키)로 조회하면 됩니다.
if(val == null)
alert(item.value+"는 구입 리스트에 없습니다.");
else
count.value = val;
}
// 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관 할수 있습니다.
// 대부분의 브라우저가 최소 2MB 혹은 그이상의 웹 스토리지 객체를 저장할 수 있도록 해줍니다. 또한 개발자는 브라우저 내 웹 스토리지 구성 박식을 설정할 수
// 있습니다. 쿠키와 또 다들 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것입니다. 웹스토리지 객체 조작은 모두 자바스크립트내에서 수행됩니다.
// . 두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다.
// : setItem(key,value) - 키-값 쌍을 보관합니다.
// : getItem(key) - 키에 해당하는 값을 받아옵니다.
// : removeItem(key) - 키와 해당 값을 삭제 합니다.
// : clear() - 모든 것을 삭제 합니다.
// : key(index) - 인덱스(index)에 해당하는 키를 받아옵니다.
// : length - 저장된 항목의 개수를 얻습니다.
// 두 스토리지 객체는 Map 과 유사합니다 . setItem/ getItem / removeItem을 지원합니다.
// 하지만 인덱스를 사용해 키에 접근할 수 있다는 점 (key(index))에서 차이가 있습니다.
</script>
</body>
</html>
