HTML+Java script (기초) canvas (문자, 도형,선, 이미지 그려보기)

<최종 화면> canvas를 이용해서 글씨, 사각형, 직선, 이미지를 그려본다.

화면에 도화지에 그리듯 그려내는 canvas에 대해 알아보자.

onload를 이용해 body를 실행하고 실행되는 콜백 함수를 이용하자.

(스크립트문은 head에 많이 사용하므로...)

canvas객체를 찾아오고 Context도 얻어와서 글씨를 적어보자.

좌표를 수정하며 글씨를 써보자.

(좌표를 0,0은 글씨 좌하단 기준이라서 화면에서 안보인다.)

fill이 아닌 stroke로 가능하다. ( fillText -> strokeText 이런식으로.. )

사각형도 그릴 수 있다.

직선도 그릴 수 있다.

이미지도 그릴 수 있다.

이미지 사이즈 조절도 가능하다.

<복붙용 코드>

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!DOCTYPE html>
<html>
<head>
    <title></title>
 
    <script>
        // body문서가 모두 load된 후 실행되는 콜백 함수
        function loaded(){
            //도화지 객체(canvas요소) 찾아오기
            var canvas= document.getElementById('canvas1');
 
            //위의 canvas에 그림을 그려주는 화가객체 얻어오기
            var context= canvas.getContext('2d'); //3d도 존재함
 
            //화가 객체에게 원하는 그림을 그려달라고 요청!
 
            // 1.화가에게 글씨 그려달라고 요청
            context.fillStyle="red";
            context.font="20px cursive";
            context.fillText("Hello",10, 40); //도화지의 좌상단 기준
            context.fillText("Hello",0, 0); //글씨의 좌하단 자표이므로 안보임
            context.fillText("Hello",0, 20); //
            context.fillText("Hello",0, 400);
 
            //글씨를 윤곽선 그리기
            context.strokeStyle="blue";
            context.strokeText("Hello", 100, 40);
 
            // 사각형 그리기
            context.fillStyle="green";
            context.fillRect(10, 50, 100, 40); //좌상단 :10,50 너비:100, 높이:40
 
            context.strokeStyle="green";
            context.strokeRect(120,50, 100, 40);
 
            // 직선 그리기
            context.beginPath(); //선의 경로작업 시작!!
            context.moveTo(10, 100); //선의 시작지점 10, 100
            context.lineTo(100, 150);
            context.lineTo(150, 120);
            context.stroke(); //위 경로로 선을 그려라!! 이때 그려짐!!
 
            // 그 밖의 도형들... p.423~p432 참고
 
            // 이미지 그리기!!
            var img= new Image(); //그림 이미지를 관리하는 객체
            img.src="./html5_logo.png";
            // 이미지는 로딩하는데 시간이 걸리므로..
            // 위에서 src로 이미지를 지정하자마자 drawImage()를 안보일 가능성 많음
            // 이미지 로딩이 완료되는 것을 듣는 이벤트를 처리함
            img.onload= function(){
                // 이 함수는 이미지 로딩이 완료되면 자동 실행됨!
                context.drawImage(img, 10, 180); //이미지릐 좌상단
                // 이미지의 사이즈를 조정하면서 그려내기
                context.drawImage(img, 10, 150, 100, 100); //그려내는 이미지 사이즈[너비:100, 높이:100]
            }
            
        }
    </script>
</head>
<body onload="loaded()">
    <!-- 프로그래머가 원하는 대로 화면을 그려내는 도화지 요소 -->
    <canvas id="canvas1" width="300" height="400" style="border: 1px solid black"></canvas>
</body>
</html>
 

저작자표시

'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글

HTML+Java script (기초) drag에 대한 이벤트 (0)	2019.12.19
HTML+Java script (기초) canvas를 이용한 움직이는 웹게임?(움직이기만 함) (1)	2019.12.17
HTML+Java script (기초) Key Event (키보드 이벤트) (0)	2019.12.17
HTML+Java script (기초) 이벤트 처리, 정규표현식 (0)	2019.12.17
HTML+Java script (기초) BOM (0)	2019.12.16