canvas 의 clearRect : 해당하는 영역만큼 지운다



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
<!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();
            //rect(왼쪽위 x, 왼쪽위 y, 가로크기, 세로크기)
            draw.rect(50,50,200,200);
            draw.lineWidth = 10;
            draw.strokeStyle = "green";
            draw.fillStyle = "#6799FF";
            //fill : 채우기
            draw.fill();
            //stroke : 선그리기
            draw.stroke();
            
            
            draw.beginPath();
            //clearRect(왼쪽위 x, 왼쪽위 y, 가로크기, 세로크기) : 해당하는 영역만큼 지운다
            draw.clearRect(100,100,100,100);
            draw.fill();
        }
    }
    </script>
</head>
 
<body>
    <canvas id="canvas" width="300px" height="400px"></canvas>
</body>
</html>
cs



결과

저작자표시

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

HTML5/CSS3 canvas 에 이미지 띄우기  (0) 2017.07.11
HTML5/CSS3 canvas 에 그라디언트 적용하기  (0) 2017.07.10
HTML5/CSS3 canvas 로 사각형 그리기  (0) 2017.07.08
HTML5/CSS3 canvas 로 삼각형 그리기  (0) 2017.07.07
HTML5/CSS3 canvas 로 곡선 그리기  (0) 2017.07.06

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
<!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();
            //rect(왼쪽위 x, 왼쪽위 y, 가로크기, 세로크기)
            draw.rect(50,50,200,200);
            draw.lineWidth = 10;
            draw.strokeStyle = "green";
            draw.fillStyle = "#6799FF";
            //fill : 채우기
            draw.fill();
            //stroke : 선그리기
            draw.stroke();
        }
    }
    </script>
</head>
 
<body>
    <canvas id="canvas" width="300px" height="400px"></canvas>
</body>
</html>
cs



결과

저작자표시

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

HTML5/CSS3 canvas 에 그라디언트 적용하기  (0) 2017.07.10
HTML5/CSS3 canvas 의 clearRect : 해당하는 영역만큼 지운다  (0) 2017.07.09
HTML5/CSS3 canvas 로 삼각형 그리기  (0) 2017.07.07
HTML5/CSS3 canvas 로 곡선 그리기  (0) 2017.07.06
HTML5/CSS3 canvas 로 원그리기  (0) 2017.07.05

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
<!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();
            draw.moveTo(50,50);
            draw.lineTo(250,50);
            draw.lineTo(150,200);
            //closePath : 마지막 지점과 처음 지점을 연결
            draw.closePath();
            draw.lineWidth = 10;
            draw.strokeStyle = "green";
            draw.stroke();
        }
    }
    </script>
</head>
 
<body>
    <canvas id="canvas" width="300px" height="400px"></canvas>
</body>
</html>
cs



결과

저작자표시

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

HTML5/CSS3 canvas 의 clearRect : 해당하는 영역만큼 지운다  (0) 2017.07.09
HTML5/CSS3 canvas 로 사각형 그리기  (0) 2017.07.08
HTML5/CSS3 canvas 로 곡선 그리기  (0) 2017.07.06
HTML5/CSS3 canvas 로 원그리기  (0) 2017.07.05
HTML5/CSS3 canvas 로 line 그리기  (0) 2017.07.04

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

+ Recent posts

티스토리툴바