키보드와 하루

1. 개념 mouseEvent - canvas에서 자유롭게 선 그리기 canvas 객체에서 마우스 이벤트를 이용하면 드래그를 통해서 자유롭게 선을 그릴 수 있게 됨 속성 설명 mousedown 캔버스에서 마우스를 눌렀을 때 발생되는 이벤트 mousemove 캔버스에서 마우스가 움직이는 동안 발생되는 이벤트 mouseup 캔버스에서 눌러진 마우스를 떼었을 때 발생되는 이벤트 moueout 캔버스에서 마우스가 벗어났을 때 발생되는 이벤트 마우스에 있는 이벤트 발생하면 function(me)의 매개변수 me에 전달됨 2. 태그 mouseEvent html5 코드 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..

1. 개념 drawImage - canvas에서 이미지 그리기 drawImage는 캔버스에서 이미지를 그려줌 이미지를 그려주기 위해 먼저 new Image 로 객체를 생성한 뒤 onload로 이미지를 로딩한 후에 캔버스에서 이미지를 그릴 수 있음 drawImage(image ,canvas_x, canvas_y) - image : 이미지 객체 - canvas_x : 캔버스의 x 좌표 - canvas_y : 캔버스의 y 좌표 drawImage(image ,canvas_x, canvas_y,canvas_width,canvas_height) - image : 이미지 객체 - canvas_x : 캔버스의 x 좌표 - canvas_y : 캔버스의 y 좌표 - canvas_width : 캔버스 위에 그려질 이미지의 ..

1. 개념 strokeText,fillText - canvas에서 텍스트 그리기 strokeText : 텍스트의 내부를 채우는 것 없이 텍스트의 외각선을 그리는 메소드 fillText : 외각선이 없이 텍스트의 내부를 채워서 그리는 메소드 2. 태그 strokeText,fillText html5 코드 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 DOCTYPE html> 결과 화면 코드 설명 1 context. strokeText ( "키보드와 하루" ,20,40); strokeText는 내부에 칠하는 색깔이 없이 외곽선만을 그려서 텍스트를 표시해 줍니다. strokeStyle을 통해서 외곽선 색깔은 blu..

1. 개념 rect,strokeRect - canvas에서 사각형 그리기 rect : canvas에서 사각형을 그릴 수 있도록 경로에 해당하는 내용을 추가함 strokeRect : 이 메소드를 사용하면 경로에 사각형을 추가하지 않고도 바로 캔버스에 그릴 수 있고 위에 있는 rect와는 다르게 라인 한 줄로 사각형을 그릴 수 있음 2. 태그 rect,strokeRect html5 코드 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 DOCTYPE html> 결과 화면 코드 설명 1 context. rect (30 , 50 , 100 , 100); rect는 경로에 사각형을 추가합니다. 30,50을 중심으로 너비가 100이고 높이가 100..

1. 개념 arc - canvas에서 원 그리기 arc는 canvas에서 원을 그릴 수 있도록 해주는 메소드임 arc(x,y,반지름,시작 각도 , 끝 각도 , 방향 설정) 속성 설명 x 원의 중심 x좌표 y 원의 중심 y좌표 반지름 원에 있는 반지름의 길이 시작각도 3시를 기준으로 시계방향으로 시작 각도 설정(원주율로 지정) 끝 각도 3시를 기준으로 시계방향으로 끝 각도 설정(원주율로 지정) 방향 설정 원을 그릴 때 시계방향으로 그릴지, 반시계방향으로 그릴지 설정 false:시계 방향(기본값),true: 반시계 방향 2. 태그 arc html5 코드 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 ..

1. 개념 canvas - 선과 도형 그리기 및 채우기 canvas에서 선과 도형을 그릴 수 있음 속성 설명 beginPath 빈 경로를 새롭게 만듬 stroke 경로가 설정된 도형의 외각선을 그려줌 fill 경로가 설정된 도형의 내부 색을 채워줌 closePath 경로로 만들어진 도형의 끝점과 시점을 직선으로 연결하며 경로를 닫아줌 2. 태그 canvas html5 코드 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> 결과 화면 코드 설명 1 canvas. getContext ( "2d" ); 캔버스 객체로 2차원이나 3차원의 그래픽을 쓸 수 있도록 ..

1. 개념 canvas - 웹 페이지에서 그래픽을 표현 canvas 태그는 html5에서 플러그인의 도움 없이 자바스크립트 코드로 그래픽을 수행 할 수 있도록 해 줌 이 캔버스를 이용하면 여러가지 것을 자유롭게 그릴 수 있고 이미지 합성 및 변환도 쉽게 가능 2. 태그 canvas html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 DOCTYPE html> 1 2 결과 화면 코드 설명 1 지금 보시면 배경이 파란색인 canvas가 그려진 것을 보실 수 있습니다. 그리고 그 canvas라는 그래픽 안에 사각형을 그려보았습니다. 2 여기서는 자바스크립트를 활용해서 선 색이 검은색인 네모를 넣어보았습니다. 이 캔버스라는 요소가 그래픽을 그릴 수 있다는 것..

1. 개념 video - 웹 페이지에서 비디오 재생 html5 전에는 비디오나 오디오 재생시 형식에 맞는 플러그인이 설치되어야 함 하지만 html5에서는 플러그인 없이 비디오를 재생할 수 있도록 video 태그가 생김 속성 설명 width 비디오가 재생될 브라우저의 폭 지정 height 비디오가 재생될 브라우저의 높이 지정 controls 재생,재생시간,중단,음소거 등 여러 제어 버튼이 화면에 출력 autoplay 비디오 로딩시 즉시 재생(브라우저별에 따라 설정 방법이 다름) loop 반복 재생 poster 로드되지 않을 때 표시될 이미지 URL preload 설정에 따라 비디오를 미리 다운로드 할지 여부를 설정 none 미리 다운로드 하지 않음 metadata 기본 정보만 가져옴 auto 미리 다운로드..

1. 개념 iframe - 다른 html을 호출하기 위한 프레임 만들기 iframe은 현재 페이지에 다른 html 페이지를 출력하고자 할 경우에 사용되고 이렇게 만들어진 frame을 인라인 프레임이라고 함 2. 태그 iframe html5 코드 test.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 DOCTYPE html> 1 2 3 4 DOCTYPE html> 5 인라인 프레임에서 Parent로 티스토리 호출 iframe2.html 1 2 3 4 5 6 7 8 9 10 11 DOCTYPE html> 6 인라인 프레임에서 self로 티스토리 호출 결과 화면 코드 설명 1 ...... 여기서는 iframe.html이라고 하는 html 페이지를 호출하고 있습니다. 예를 ..

1. 개념 multiple , datalist - 데이터 목록 나열 multiple : select 태그에서 사용되는 옵션으로입력한 항목만큼 데이터를 나열해 줌 datalist : select 태그 대신에 input text 태그에서 데이터 목록을 나열해 주고 선택한 값을 자동으로 입력해 줌 2. 태그 multiple , datalist html5 코드 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 32 33 34 35 36 37 DOCTYPE html> 1 테스트1 테스트2 테스트3 테스트4 테스트5 2 테스트1 테스트2 테스트3 테스트4 테스트5 3 결과 화면 코드 설명 1 ...... select에 아..