canvas_html5 튜토리얼 팁을 사용하여 베지어 곡선 그리기

1. 2차 베지어 곡선

QuadraticCurveTo(cpx,cpy,x,y) //cpx, cpy는 제어점의 좌표를 나타내고, x, y는 끝점 좌표를 나타냅니다.

수학적 공식은 다음과 같이 표현됩니다.

2차 베지어 곡선의 경로는 점 P0, P1, P2가 주어지면 함수 B(

t)로 추적됩니다.

코드 예:

코드 복사코드는 다음과 같습니다.

<메타 이름 ="키워드 " content="">






< ;script>
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//그리기 시작점 , 제어점, 끝점
context.beginPath();
context.lineTo(130,40)
context.lineTo(180,150); .스트로크()

//2차 베지어 곡선 그리기
context.beginPath();
context.moveTo(20,170)
context.quadraticCurveTo(130,40,180,150); red";
context.Stroke();
}






코드 효과:

2. 3차 베지어 곡선

BezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) //cp1x, cp1y는 첫 번째 제어점의 좌표를 나타내고, cp2x, cp2y는 두 번째 제어점의 좌표를 나타내고, x, y는 끝점 ;

수학적 공식은 다음과 같이 표현됩니다.

4개의 점 P0, P1, P2, P3은 평면 또는 3차원 공간에서 3차 베지어 곡선을 정의합니다. 곡선은 P0에서 시작하여 P1으로 이동하고 P2 방향에서 P3으로 이동합니다. 일반적으로 P1이나 P2를 통과하지 않습니다. 이 두 지점은 방향 정보를 제공하기 위한 것입니다. P0과 P1 사이의 거리는 곡선이 P3 방향으로 회전하기 전에 P2 방향으로 이동하는 "시간"을 결정합니다.

코드 예:

코드 복사

코드는 다음과 같습니다.

<메타 이름 ="키워드 " content="">




< h1>3배 베지어 곡선

< script> ;
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d')
//시작점 그리기, 제어 포인트, 끝점
context.beginPath();
context.lineTo(60,80)
context.lineTo(150,30); context.lineTo(170,150)
context.Stroke();

//3차원 베지어 곡선 그리기
context.beginPath();
context.bezierCurveTo(60,80,150,30,170,150); = "빨간색";
context.Stroke()
}

코드 렌더링:

멋진 효과 아닌가요? . . HTML5 캔버스는 정말 재미있고 중독성이 있습니다.