본문 바로가기

canvas

HTML5 Canvas Shapes 2 아래와 같은 모서리가 둥근 사각형을 그려보자. 위 도형을 모서리를 처리하기 위하여 quadraticCurveTo 메서드에 대해서 먼저 알아야 한다. context.quadraticCurveTo(controlX, controlY, endX, endY); quadraticCurveTo 메서드 동작원리 (출처 : html5canvastutorials) context point로 moveTo 메서드를 사용하여 point를 이동 후 control point 좌표를 quadraticCurveTo 메서드 인자 controlX, controlY에 지정한다. endX, endY 인자는 곡선의 끝 점을 지정한다. quadraticCurveTo 메서드를 이용하여 모서리가 둥근 사각형을 그려보자. 위 소스의 도형 그리기 순서.. 더보기
HTML5 Canvas Line2 오늘은 Line 굵기를 조절하는 방법과 선의 색깔, 그리고 선의 끝 맺음 처리를 다양하게 시도해 보겠다. 선의 굵기를 지정하는 lineWidth가 존재한다. context.lineWidth=[value]; 선의 굴기를 지정해보자. 위 소스의 실행 결과는 아래와 같다. 선의 색상을 지정해보자. 위 소스 코드에 아래 소스를 추가한다. context.strokeStyle="#fff000"; 실행 결과는 아래와 같다. 이제 선 lineCap을 사용한 예제를 확인 해보자. 실행 결과는 아래와 같다. 더보기
HTML5 Canvas Line1 HTML5 Canvas 강좌를 시작해보고자 한다. 첫 번째 주제는 Canvas Line이다. Canvas 브라우저 지원 현황 (출처 : http://www.findmebyip.com/litmus) 우선 Line을 그리기 위하여 Canvas 엘리먼트를 만들자. 9라인은 Canvas 엘리먼트의 마크업 형식이며 초기에는 아무 내용도 없고 경계선도 없다. Canvas에 접근하기 위한 id속성과 Canvas크기를 width와 height를 각각 지정하였다. 5번라인은 DOM에서 Canvas 엘리먼트를 찾게 되며 모든 Canvas는 드로잉 컨텍스트를 갖으며 6번라인은 Canvas에 대해 getContext() 메소드를 호출할 수 있다. 이때 "2d"라는 문자열을 getContext() 메소드에 넘겨줘야 한다. 여기.. 더보기