본문 바로가기

사각형 렌더링

[그래픽 처리] 렌더링 메서드/arc(), arcTo()/quadraticCurveTo(), bezieCurveTo()/rect() [그래픽 처리] 렌더링 메서드/arc(), arcTo()/quadraticCurveTo(), bezieCurveTo()/rect() [1] 원호 렌더링 - arc(), arcTo() 1. arc() 메서드 context.arc(x, y, 반경, 시작 각도, 종료 각도, 반시계방향 지정) 여기서 '반시계 방향 지정'을 true로 하면 시계방향으로 원호를 그립니다. 각도는 '라디안(radian)'이므로 '도(degree)'를 '라디안(rad)'으로 변환해야 할 때 아래의 계산식을 사용하면 됩니다. var rad = deg*Math.PI / 180; arc() 메서드로 원호를 그리는 프로그램 예제입니다. ※stroke() : 패스의 테두리 렌더링 원호가 아닌 완전한 원을 그리고 싶을 때는 arc() 메서드의 .. 더보기
[그래픽 처리] 캔버스의 기초/렌더링 컨텍스트 [그래픽 처리] 캔버스의 기초 HTML5의 신기능인 캔버스를 사용하면 도형을 그릴수 있습니다. HTML에 태그를 추가하고 캔버스 내에 도형을 렌더링하면 캔버스를 사용할 수 있습니다. 도형을 그리는 순서를 소개하겠습니다. 1. 캔버스 객체를 얻습니다. 자바스크립트에서 태그와 그 기능을 참조하기 위해 태그에 ID를 부여해 둡니다. document.getElementById() 메서드를 호출해 태그에 해당하는 캔버스 객체를 얻고 인수를 지정합니다. 2. 캔버스 객체로부터 렌더링 컨텍스트(Rendering Context)를 얻습니다. 렌더링 컨텍스트는 종이에 그림을 그리기 위한 색연필과 같습니다. 다음과 같이 캔버스 객체로부터 렌더링 컨텍스트를 얻어 변수 ctx에 저장합니다. 컨텍스트 종류에 따라 그림의 형태가.. 더보기

티스토리툴바