Blog Content

마우스 이벤트 중에서 mousedown 상태에서 마우스를 이동하 mouserup 할 때 선을 그리는 예제 입니다. ex07.sketch.html Colored By Color Scripter™ 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 참 쉽죠~? 끝

사각형, 삼각형, 원 그리기 기초를 했는데요. 이를 응용해서 간단하게 제가 좋아하는 애니메이션중 그랑죠의 마법진을 그려봤습니다...피닉스랑, 포세이돈은...-_-a ex06.Shape.html Colored By Color Scripter™ 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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91..

캔버스를 이용해서 원을 그리는 예제 입니다. 원을 그리는데 사용되는 메서드는 arc()메서드를 사용해서 그립니다. arc(x좌표, y좌표, 반경(반지름), 시작점, 끝 점, 방향)을 설정합니다. ex05.Circle.html Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var canvas = document.getElementById("can1"); var cv = canvas.getContext("2d"); cv.beginPath(); cv.arc(100, 100, 50, 0, 2*Math.PI, true); cv.fill(); cv.closePath(); 결과를 확인합니다. 참 쉽죠~? 끝

캔버스를 이용하여 삼각형을 그리는 예제 입니다. 삼각형 모양을 그릴때는 moveTo(),lineTo() 메서드를 사용해서 좌표를 지정합니다. moveTo로 시작지점을 그리고, lineTo로 선을 그립니다. 안에 소스에 설명 추가 하였습니다. ex04.Triangle.html Colored By Color Scripter™ 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 #can1 { width:300px; height:300px; } var canvas = document.getElementById("can1"); var cv = canvas.getContext("2d"); //삼각형 그리기 cv...

HTML5 에 새로 추가된 캔버스 입니다. 캔버스는 그림을 그리드는 기능을 갖고 있는데요. 도형을 그리는 순서는 캔버스 객체를 얻고, 캔버스 객체로 부터 컨텍스트를 얻고, 컨텍스트의 메서드, 속성을 가지고 그림을 그립니다. 렌더링~ fillRect(시작 X좌표, 시작 Y좌표, 사각형의 가로, 사각형의 세로) 간단하게 사각형 모양으로 그림을 그려봅니다. ex03.canvas.html Colored By Color Scripter™ 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 결과를 확인합니다. 참 쉽죠~?