유수봉 교수의 WEB-11주차

Notice

모든 공부기록

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			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

Tags more

Archives

Today

Total

관리 메뉴

AR삽질러

유수봉 교수의 WEB-11주차 본문

WEB/유수봉교수의 WEB

유수봉 교수의 WEB-11주차

아랑팡팡 2023. 5. 17. 17:19

728x90

유수봉 교수의 Web (Canvas)

js canvas

JS CANVAS

▶ CV01.html - 캔버스 만들기

JS CANVAS

<!DOCTYPE html>
<html>

<head>
    <title>캔버스 만들기</title>
</head>

<body>
    <h3>3 개의 캔버스 만들기</h3>
    <hr>
    <canvas id="canvas1" width="150" height="100" style=" background-color:lightblue"> </canvas>
    <canvas id="canvas2" width="150" height="100" style="background-color:violet"> </canvas><br>
    <canvas id="canvas3" width="300" height="150" style=" background-color:yellow"> </canvas>
</body>

</html>

▶ CV02.html - 캔버스 맛보기

JS CANVAS

<!DOCTYPE html>
<html>

<head>
    <title>캔버스 그리기 맛보기</title>
</head>

<body>
    <h3>캔버스 그리기 맛보기</h3>
    <hr>
    <canvas id="myCanvas" style="background-color:aliceblue" width="250" height="150"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // 파란선으로 사각형 그리기
        context.beginPath(); 						// 빈 경로 만들기
        context.strokeStyle = "blue"; 		// 선 색  설정
        context.rect(30, 30, 50, 50); 			// (30,30)에서 50x50 크기 사각형을 경로에 삽입
        context.stroke(); 							// 경로에 있는 모든 도형의 외곽선 그리기

        // violet 색으로 채운 사각형 그리기
        context.beginPath(); 						// 빈 경로 만들기
        context.fillStyle = "violet"; 			// 채우기 색 
        context.rect(60, 60, 50, 50); 			// (60,60)에서 50x50 크기 사각형을 경로에 삽입
        context.fill(); 								// 경로에 있는 모든 도형의 내부만 채워 그리기

        // green 색으로 텍스트 내부만 그리기
        context.font = "20px Gothic";
        context.fillStyle = "green"; 			// 채우기 색 
        context.fillText("Text in Canvas", 100, 50); // 텍스트를 경로에 넣지 않고 바로  그리기
    </script>
</body>

</html>

▶ CV03.html - 사각형 그리기

JS CANVAS

<!DOCTYPE html>
<html>

<head></head>

<body>
    <canvas id="cv" width="400" height="300" style="position: relative; border: 1px solid #000;"></canvas>
</body>

</html>

<script type="text/javascript">
    var canvas = document.getElementById("cv");
    var context = canvas.getContext("2d");

    context.fillRect(10, 10, 100, 100);    //색으로채운 사각형
    context.strokeRect(120, 10, 100, 100); //윤곽만 있는 사각형

    context.fillRect(230, 10, 100, 100);   //색으로 채운 사각형
    context.clearRect(230, 10, 50, 50);    //앞 사각형의 절반을 지움

    context.rect(340, 10, 50, 50)   // (30,30) 에 50*50 크기 사각형 삽입
    context.stroke(); // 경로에 있는 모든 도형의 외곽선 그리기
</script>

▶ CV04.html - 삼각형 그리기

JS CANVAS

<!DOCTYPE html>
<html>

<head></head>

<body>
    <canvas id="cv" width="400" height="300" style="position: relative; border: 1px solid #000;"></canvas>
</body>

</html>

<script type="text/javascript">
    var canvas = document.getElementById("cv");
    var context = canvas.getContext("2d");

    context.beginPath(); 	//패스 그리기 시작  

    context.moveTo(50, 10); 	//패스 시작점 지정  

    context.lineTo(20, 100); 	//패스 이동점 지정
    context.lineTo(80, 100);
    context.lineTo(50, 10);

    context.stroke();    	//윤관선 그리기
  //context.fill();   	//색 채우기
</script>

<!DOCTYPE html>
<html>

<head></head>

<body>
    <canvas id="cv" width="400" height="300" style="position: relative; border: 1px solid #000;"></canvas>
</body>

</html>

<script type="text/javascript">
    var canvas = document.getElementById("cv");
    var context = canvas.getContext("2d");

    context.beginPath(); 	//패스 그리기 시작  

    context.moveTo(70, 10); 	//패스 시작점 지정  

    context.lineTo(20, 100); 	//패스 이동점 지정
    context.lineTo(80, 90);
    context.lineTo(30, 10);
    context.lineTo(40, 120);
    context.lineTo(70, 10);

    context.stroke();    	//윤관선 그리기
  //context.fill();   	//색 채우기
</script>

▶ CV05.html - 동그라미 그리기

JS CANVAS

<!DOCTYPE html>
<html>

<head></head>

<body>
    <canvas id="cv" width="400" height="300" style="position: relative; border: 1px solid #000;"></canvas>
</body>

</html>

<script type="text/javascript">
    var canvas = document.getElementById("cv");
    var context = canvas.getContext("2d");

    context.beginPath(); //패스 그리기 시작    
    context.arc(70, 70, 50, 0, 2 * Math.PI, true); //원그리기  
    context.stroke();    //윤관선 그리기
</script>

▶ CV06.html - 사각형 색 지정하기

JS CANVAS

<!DOCTYPE html>
<html>

<head></head>

<body>
    <canvas id="cv" width="400" height="300" style="position: relative; border: 1px solid #000;">
    </canvas>
</body>

</html>

<script type="text/javascript">
    var canvas = document.getElementById("cv");
    var context = canvas.getContext("2d");

    context.fillStyle = "blue";
    context.fillRect(10, 10, 100, 100);    //파란색으로 채운 사각형

    context.strokeStyle = "red";
    context.strokeRect(120, 10, 100, 100); //빨가색 윤곽선 사각형
</script>

▶ CV09.html - 글자

JS CANVAS

<!DOCTYPE html>
<html>

<head></head>

<body>
    <canvas id="cv" width="400" height="300" style="position: relative; border: 1px solid #000;"></canvas>
</body>

</html>

<script type="text/javascript">
    var canvas = document.getElementById("cv");
    var context = canvas.getContext("2d");

    var msg = "Hello, Canvas!"

    context.font = "20px '맑은 고딕'";
    context.fillText(msg, 10, 50);

    context.font = "40px 'Tahoma'";
    context.strokeText(msg, 10, 100);
</script>

▶ CV13.html - 선의 색과 굵기

JS CANVAS

<!DOCTYPE html>
<html>

<head>
    <title>선의 색과 굵기</title>
</head>

<body>
    <h3>선의 색과 굵기</h3>
    <hr>
    <canvas id="myCanvas" style="background-color:aliceblue" width="180" height="300"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // 1 픽셀의 blue 직선 그리기 
        context.beginPath();
        context.moveTo(20, 20);
        context.lineTo(150, 50);
        context.strokeStyle = "blue";
        context.stroke();

        // 10 픽셀 yellowgreen 사각형 그리기
        context.beginPath();
        context.rect(20, 80, 120, 50);
        context.lineWidth = 10; // 선 굵기 10픽셀
        context.strokeStyle = "yellowgreen"; // 선 색
        context.stroke();

        // 20 픽셀의 violet 색 원호 그리기
        context.beginPath();
        context.arc(80, 220, 50, 0, 1.5 * Math.PI, false);
        context.lineWidth = 20; // 선 굵기 20픽셀
        context.strokeStyle = "violet"; // 선 색
        context.stroke(); 
    </script>
</body>

</html>

▶ CV15.html - 텍스트 그리기

JS CANVAS

<!DOCTYPE html>
<html>

<head>
    <title>텍스트 그리기</title>
</head>

<body>
    <h3>텍스트 그리기</h3>
    <hr>
    <canvas id="myCanvas" style="background-color:beige" width="500" height="400"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.strokeStyle = "blue";

        // font 프로퍼티로 다양한 크기와 서체 활용
        for (var i = 0; i < 4; i++) {
            context.font = (10 + i * 10) + "px forte";
            context.strokeText("Javascript 재밌다.", 10, 30 + i * 50);
        }

        // 텍스트 외곽선만 그리기
        context.font = "italic 50px forte";
        context.strokeStyle = "magenta";
        context.lineWidth = 3;
        context.textAlign = "left";
        context.strokeText("Javascript 재밌다.", 50, 250);

        // 텍스트 채워 그리기
        context.fillStyle = "green";
        context.textAlign = "right";
        context.fillText("Javascript 재밌다.", 490, 300);
    </script>
</body>

</html>

유수봉 교수의 Web-(CANVAS 과제)

▶ Job#1 : 함수를 이용한 내이름 그리기 (MyName.html)

<!DOCTYPE html>
<html>

<head>
    <title>텍스트 그리기</title>
</head>

<body>
    <h3>텍스트 그리기</h3>
    <hr>
    <canvas id="myCanvas" style="background-color:beige" width="800" height="400"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // 텍스트 외곽선만 그리기
        context.font = "italic 35px forte";
        context.strokeStyle = "red";
        context.lineWidth = 2;
        context.textAlign = "left";
        context.strokeText("Dkfkddl95@Naver.Com", 10, 50);

        // 텍스트 채워 그리기
        context.font = "35px forte";
        context.fillStyle = "blue";
        context.textAlign = "right";
        context.fillText("최아랑(text)", 200, 330);


         // 1 픽셀의 blue 직선 그리기 
        context.beginPath();
        context.lineWidth = 10; // 선 굵기 20픽셀    
        context.strokeStyle = "blue";

        context.moveTo(90, 150);
        context.lineTo(80, 120);

        context.moveTo(110, 150);
        context.lineTo(30, 150);

        context.moveTo(80, 160);
        context.lineTo(40, 200);

        context.moveTo(100, 200);
        context.lineTo(80, 160);

        context.moveTo(80, 190);
        context.lineTo(80, 230);

        context.moveTo(120, 130);
        context.lineTo(120, 250);

        context.moveTo(30, 230);
        context.lineTo(110, 230);

        context.stroke();

        // "아"
        // 20 픽셀의 violet 색 원호 그리기
        context.beginPath();
        context.arc(180, 170, 30, 0, 1.8 * Math.PI, false);
        context.lineWidth = 20; // 선 굵기 20픽셀
        context.strokeStyle = "violet"; // 선 색
        
        context.moveTo(230, 220);
        context.lineTo(230, 100);

        context.moveTo(260, 150);
        context.lineTo(220, 150);
        context.stroke();


        // "랑"
        context.beginPath(); 	//패스 그리기 시작  
        context.fillStyle = "#BA4A00";

        context.beginPath(); 	//패스 그리기 시작  
        context.lineWidth = 20; // 선 굵기 20픽셀
        context.strokeStyle = "#3498DB";

        context.moveTo(400, 90);
        context.lineTo(300, 90);

        context.moveTo(400, 80);
        context.lineTo(400, 160);

        context.moveTo(400, 150);
        context.lineTo(300, 150);

        context.moveTo(400, 210);
        context.lineTo(300, 210);

        context.moveTo(300, 220);
        context.lineTo(300, 140);

        context.moveTo(450, 235);
        context.lineTo(450, 60);

        context.moveTo(550, 130);
        context.lineTo(450, 130);

        context.stroke();

        // 20 픽셀의 violet 색 원호 그리기
        context.beginPath();
        context.lineWidth = 20; // 선 굵기 20픽셀
        context.strokeStyle = "#239B56"; // 선 색

        context.arc(390, 280, 30, 0.4 * Math.PI, 0.6 * Math.PI, true);

        context.stroke(); 

        
        context.fillStyle = "blue";
        context.beginPath();
        context.moveTo(658, 0.0);
        context.lineTo(691, 70);
        context.lineTo(768, 78.3);
        context.lineTo(712, 131);
        context.lineTo(725, 205);
        context.lineTo(658, 170);
        context.lineTo(591.2, 205);
        context.lineTo(605, 131);
        context.lineTo(551, 78);
        context.lineTo(625, 68);
        context.lineTo(658, 0);

        context.fill();

        context.beginPath();
        context.moveTo(558, 0.0);
        context.lineTo(691, 70);
        context.lineTo(768, 78.3);
        context.lineTo(712, 131);
        context.lineTo(725, 205);
        context.lineTo(658, 170);
        context.lineTo(591.2, 205);
        context.lineTo(595, 131);
        context.lineTo(551, 78);
        context.lineTo(625, 68);
        context.lineTo(658, 0);
        closePath();

        context.fill();
    </script>
</body>

</html>

▶ Job#2 : 그림판 만들기(MyPainter.html)

<!DOCTYPE html>
<html>

<head>
    <title>마우스 드래깅으로 캔버스에 그림 그리기</title>
</head>

<body onload="init()">
    <h3>마우스를 누른 채 드래깅하여 그림 그려 보세요</h3>
    <hr>
    <canvas id="myCanvas" style="background-color:aliceblue" width="400" height="300">
    </canvas>
    <script>
        var canvas, context;
        function init() {
            canvas = document.getElementById("myCanvas");
            context = canvas.getContext("2d");

            context.lineWidth = 2; // 선 굵기 2
            context.strokeStyle = "blue";

            canvas.addEventListener("mousemove", function (e) { move(e) }, false);
            canvas.addEventListener("mousedown", function (e) { down(e) }, false);
            canvas.addEventListener("mouseup", function (e) { up(e) }, false);
            canvas.addEventListener("mouseout", function (e) { out(e) }, false);
        }

        var startX = 0, startY = 0; // 드래깅동안, 처음 마우스가 눌러진 좌표
        var dragging = false;
        function draw(curX, curY) {
            context.beginPath();
            context.moveTo(startX, startY);	// 처음 마우스를 클릭한 곳
            context.lineTo(curX, curY);			// 마우스가 이동한 곳
            context.stroke();
        }
        function down(e) { 	// 마우스를 클릭한 때
            startX = e.offsetX; startY = e.offsetY; dragging = true;
        }

        function up(e) { dragging = false; }

        function move(e) {	// 마우스를 이동한 때
            if (!dragging) return; // 마우스가 눌러지지 않았으면 리턴
            var curX = e.offsetX, curY = e.offsetY;
            draw(curX, curY);
            startX = curX; startY = curY;
        }

        function out(e) { dragging = false; }
    </script>
</body>

</html>

728x90

LIST

저작자표시 비영리 동일조건

'WEB > 유수봉교수의 WEB' 카테고리의 다른 글

유수봉 교수의 WEB-12주차 (0)	2023.05.31
유수봉 교수의 WEB-13주차 (0)	2023.05.31
유수봉 교수의 WEB-10주차 (0)	2023.05.10
유수봉 교수의 WEB-9주차 (0)	2023.05.03
유수봉 교수의 Web - 8주차(중간보고서) (0)	2023.04.25

'WEB/유수봉교수의 WEB' Related Articles

AR삽질러

유수봉 교수의 WEB-11주차 본문

유수봉 교수의 WEB-11주차

'WEB > 유수봉교수의 WEB' 카테고리의 다른 글

티스토리툴바