canvas 로 곡선 그리기



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        if(canvas.getContext){
            var draw = canvas.getContext("2d");
            
            //조절점이 1개
            draw.beginPath();
            draw.moveTo(50,50);
            //quadraticCurveTo(조절점x, 조절점y, 선의 끝점x, 선의 끝점y)
            draw.quadraticCurveTo(150, 200, 250, 50);
            draw.lineWidth = 10;
            draw.strokeStyle = "green";
            draw.stroke();
            
            
            //조절점이 2개
            draw.beginPath();
            draw.moveTo(50,200);
            //bezierCurveTo(조절점1x, 조절점1y, 조절점2x, 조절점2y, 선의 끝점x, 선의 끝점y)
            draw.bezierCurveTo(100,300, 200,100, 250,200);
            draw.lineWidth = 10;
            draw.strokeStyle = "blue";
            draw.stroke();
        }
    }
    </script>
</head>
 
<body>
    <canvas id="canvas" width="300px" height="400px"></canvas>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 canvas 로 사각형 그리기  (0) 2017.07.08
HTML5/CSS3 canvas 로 삼각형 그리기  (0) 2017.07.07
HTML5/CSS3 canvas 로 원그리기  (0) 2017.07.05
HTML5/CSS3 canvas 로 line 그리기  (0) 2017.07.04
HTML5/CSS3 audio : 사운드 파일 재생하기  (0) 2017.07.03

canvas 로 원그리기



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        if(canvas.getContext){
            var draw = canvas.getContext("2d");
            
            //원
            draw.beginPath();
            //arc(중심점x, 중심점y, 반지름, 시작각도, 끝각도, 방향)
            //true : 반시계 방향 , false : 시계 방향
            draw.arc(100, 100, 50, 0, Math.PI*2, true);
            draw.lineWidth = 10;
            draw.strokeStyle = "#00f";
            draw.stroke();
        }
    }
    </script>
</head>
 
<body>
    <canvas id="canvas" width="300px" height="300px"></canvas>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 canvas 로 삼각형 그리기  (0) 2017.07.07
HTML5/CSS3 canvas 로 곡선 그리기  (0) 2017.07.06
HTML5/CSS3 canvas 로 line 그리기  (0) 2017.07.04
HTML5/CSS3 audio : 사운드 파일 재생하기  (0) 2017.07.03
HTML5/CSS3 video : 동영상 파일 재생하기  (0) 2017.07.02

canvas 로 line 그리기



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    window.onload = function(){
        /* 
        beginPath : 그리기 시작
        moveTo(x, y) : 선이 시작될 좌표
        lineTo(x, y) : 선이 이동할 좌표
        lineWidth : 선 두께
        lineCap : 선의 끝타입 (butt | round | square)
        lineJoin : 선의 연결부분 (miter | round | bevel)
         */
        var canvas = document.getElementById("canvas");
        if(canvas.getContext){
            var draw = canvas.getContext("2d");
            
            draw.beginPath();
            draw.moveTo(100, 100);
            draw.lineTo(200, 100);
            draw.lineTo(200, 200);
            draw.lineWidth = 10;
            draw.lineCap = "round";
            draw.lineJoin = "round";
            draw.strokeStyle = "green";
            draw.stroke();
        }
    }
    </script>
</head>
 
<body>
    <canvas id="canvas" width="300px" height="300px"></canvas>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 canvas 로 곡선 그리기  (0) 2017.07.06
HTML5/CSS3 canvas 로 원그리기  (0) 2017.07.05
HTML5/CSS3 audio : 사운드 파일 재생하기  (0) 2017.07.03
HTML5/CSS3 video : 동영상 파일 재생하기  (0) 2017.07.02
HTML5/CSS3 embed : url로 된 동영상 재생하기  (0) 2017.07.01

audio : 사운드 파일 재생하기


 

MP3 

Wav 

Ogg 

IE 

O 

X 

X 

파이어폭스 

X 

O 

O 

크롬 

O 

O 

O 

사파리 

O 

O 

X 

오페라 

X 

O 

O 



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <!-- 
    autoplay : 자동으로 오디오 재생
    controls : 컨트롤바 나타냄
    loop : 반복재생
    src : 경로
    autobuffer : 사용자가 플레이하기전 미리 다운로드 할지 여부
     -->
    <audio controls>
        <source src="images/sound.MP3" type="audio/mpeg">
        <p>이 브라우저는 audio 요소를 지원하지 않습니다.</p>
    </audio>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 canvas 로 원그리기  (0) 2017.07.05
HTML5/CSS3 canvas 로 line 그리기  (0) 2017.07.04
HTML5/CSS3 video : 동영상 파일 재생하기  (0) 2017.07.02
HTML5/CSS3 embed : url로 된 동영상 재생하기  (0) 2017.07.01
HTML5/CSS select : 목록 선택상자  (0) 2017.06.30

video : 동영상 파일 재생하기


 

MP4 

WebM 

OGV 

IE 

O 

X 

X 

파이어폭스 

X 

O 

O 

크롬 

O 

O 

O 

사파리 

O 

X 

X 

오페라 

X 

O 

O 




html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <!-- 
    autoplay : 자동으로 비디오 실행
    controls : 컨트롤바 나타남
    width : 가로크기
    height : 세로크기
    loop : 반복재생
    poster : 비디오가 시작되기전 보여질 이미지
    src : 경로
    autobuffer : 사용자가 플레이하기전 미리 다운로드 할지 여부
     -->
    <video width="300px" height="300px" controls>
        <source src="images/example.mov" type="video/webm">
        <p>이 브라우저는 video 요소를 지원하지 않습니다.</p>
    </video>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 canvas 로 line 그리기  (0) 2017.07.04
HTML5/CSS3 audio : 사운드 파일 재생하기  (0) 2017.07.03
HTML5/CSS3 embed : url로 된 동영상 재생하기  (0) 2017.07.01
HTML5/CSS select : 목록 선택상자  (0) 2017.06.30
HTML5/CSS3 textarea : 텍스트 여러줄 입력하기  (0) 2017.06.29

embed : url로 된 동영상 재생하기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <embed src="https://www.youtube.com/embed/NjcDxJxYzAU?ecver=2" width="300px" height="300px">
</body>
</html>
cs



결과

유튜브 동영상이 재생된다

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 audio : 사운드 파일 재생하기  (0) 2017.07.03
HTML5/CSS3 video : 동영상 파일 재생하기  (0) 2017.07.02
HTML5/CSS select : 목록 선택상자  (0) 2017.06.30
HTML5/CSS3 textarea : 텍스트 여러줄 입력하기  (0) 2017.06.29
HTML5/CSS3 radio : 단일선택 예제  (0) 2017.06.28

select : 목록 선택상자



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <select>
        <!-- optgroup : 항목의 레이블 적용 -->
        <!-- option : 선택할 항목 -->
        <optgroup label="포탈">
            <!-- 
            value : 데이터 전송시 전송되는 값
            selected : 페이지 로드시 미리 선택되어 보여지는 항목
             -->
            <option value="www.naver.com" selected="selected">네이버</option>
            <option value="www.nate.com">네이트</option>
            <option value="www.daum.net">다음</option>
        </optgroup>
    </select>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 video : 동영상 파일 재생하기  (0) 2017.07.02
HTML5/CSS3 embed : url로 된 동영상 재생하기  (0) 2017.07.01
HTML5/CSS3 textarea : 텍스트 여러줄 입력하기  (0) 2017.06.29
HTML5/CSS3 radio : 단일선택 예제  (0) 2017.06.28
HTML5/CSS3 checkbox : 다중선택 예제  (0) 2017.06.27

textarea : 텍스트 여러줄 입력하기


cols : 가로크기

rows : 세로크기 (줄 수)

resize: none - 기본속성인 크기 변경을 막음

outline: none - 기본속성인 포커스시 파란색 테두리 없앰



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <p>
        <label for="comment">의견</label>
        <!-- 
        cols : 가로크기
        rows : 세로크기 (줄 수)
        resize: none - 기본속성인 크기 변경을 막음
        outline: none - 기본속성인 포커스시 파란색 테두리 없앰
         -->
        <textarea id="comment" cols="30" rows="5" style="resize: none; outline: none;"></textarea>
    </p>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 embed : url로 된 동영상 재생하기  (0) 2017.07.01
HTML5/CSS select : 목록 선택상자  (0) 2017.06.30
HTML5/CSS3 radio : 단일선택 예제  (0) 2017.06.28
HTML5/CSS3 checkbox : 다중선택 예제  (0) 2017.06.27
HTML5/CSS3 form 속성  (0) 2017.06.26

radio : 단일선택 예제



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <p>
        <!-- label의 for 속성값과 id 값을 같게하여 연결해준다 -->
        <!-- 
        checked : 페이지 로드시 미리 체크가 되어 있도록 한다
        value : 데이터 전송시 전달되는 값
        name : name이 같은 여러 라디오 버튼 중 하나를 선택한다
         -->
        <label for="man">남자</label>
        <input type="radio" id="man" name="gender" value="남자" checked  />
    </p>
    <p>
        <label for="woman">여자</label>
        <input type="radio" id="woman" name="gender" value="여자"  />
    </p>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS select : 목록 선택상자  (0) 2017.06.30
HTML5/CSS3 textarea : 텍스트 여러줄 입력하기  (0) 2017.06.29
HTML5/CSS3 checkbox : 다중선택 예제  (0) 2017.06.27
HTML5/CSS3 form 속성  (0) 2017.06.26
HTML5/CSS filter : 이미지 필터 적용하기  (0) 2017.06.25

checkbox : 다중선택 예제



html)

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>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <p>
        <!-- label의 for 속성값과 id 값을 같게하여 연결해준다 -->
        <!-- 
        checked : 페이지 로드시 미리 체크가 되어 있도록 한다
        value : 데이터 전송시 전달되는 값
         -->
        <label for="apple">사과</label>
        <input type="checkbox" id="apple" value="사과" checked  />
    </p>
    <p>
        <label for="banana">바나나</label>
        <input type="checkbox" id="banana" value="바나나"  />
    </p>
    <p>
        <label for="peach">복숭아</label>
        <input type="checkbox" id="peach" value="복숭아"  />
    </p>
</body>
</html>
cs



결과

저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 textarea : 텍스트 여러줄 입력하기  (0) 2017.06.29
HTML5/CSS3 radio : 단일선택 예제  (0) 2017.06.28
HTML5/CSS3 form 속성  (0) 2017.06.26
HTML5/CSS filter : 이미지 필터 적용하기  (0) 2017.06.25
HTML5/CSS3 transform : skew - 요소 기울이기  (0) 2017.06.24

+ Recent posts

티스토리툴바