본문 바로가기

stroke()

[그래픽 처리] 렌더링 메서드/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() 메서드의 .. 더보기
[그래픽 처리] 다각형 렌더링 [그래픽 처리] 다각형 렌더링 삼각형 렌더링 삼각형을 그리는 순서는 다음과 같습니다. 1. 캔버스의 렌더링 컨텍스트를 얻습니다. 2. beginPath() 메서드로 패스를 초기화 합니다. 3. moveTo(), lineTo() 메서드로 좌표를 지정합니다. 4. closePath() 메서드로 패스 지정을 종료합니다. 5. fill() 메서드로 삼각형을 렌더링합니다. moveTo() 메서드로 좌표의 시작점을 지정한 후, lineTo() 메서드로 선을 긋습니다. closePath()는 생략가능합니다. 터치한 곳에 직삼각형 그리기 예제를 통해 설명해 드리겠습니다. 캔버스에 onmousedown 이벤트를 설정해주어야 이벤트가 발생해 마우스로 터치한 부분에 삼각형이 렌더링 되겠죠. event 인수의 x와 y에 터치.. 더보기

티스토리툴바