1. 베지어(Bezier) 곡선과 이차(Quadratic )곡선
베지어 곡선은 삼차(cubic)와 이차(quadric) 변수가 모두 가능합니다.
이 타입은 보통 복잡한 유기체적 형태를 그리는데 사용됩니다.
quadraticCurveTo(cp1x, cp1y, x, y);
cp1x 및 cp1y로 지정된 제어점을 사용하여 현재 펜의 위치에서 x와 y로 지정된 끝점까지 이차 베지어 곡선을 그립니다.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
(cp1x, cp1y) 및 (cp2x, cp2y)로 지정된 제어점을 사용하여 현재 펜 위치에서 x 및 y로 지정된 끝점까지 삼차 베지어 곡선을 그립니다.
오른쪽의 사진은 두 곡선의 차이를 가장 잘 설명합니다.
이차 베지에 곡선은 시작점과 끝점 (파란색 점) 그리고 하나의 제어점 (control point, 빨간색 점)을 가지고 있지만, 삼차 베지에 곡선은 두개의 제어점을 사용하고 있습니다.
두 메소드에 모두 사용되는 x 와 y 변수는 모두 끝점의 좌표를 나타냅니다.
첫번째 제어점은 cp1x 와 cp1y 좌표로, 두번째 제어점은 cp2x 와 xp2y 좌표로 표시되었습니다.
이차 및 삼차 베지어 곡선을 사용하는 것은 꽤 어려울 수 있습니다.
왜냐하면 Adobe Illustrator(어도비 일러스트)와 같은 백터 드로잉 소프트웨어와는 달리, 현재 수행중인 작업에 대해 직접적인 시각적 피드백을 받을 수 없기 때문입니다.
이런 점 때문에 복잡한 모양을 그리기는 어려울 수 있으므로 연습을 필요로합니다.
2. 이차 베지에 곡선(Quadratic Bezier curves) 예제
여러개의 이차 베지어 곡선을 이용해 말풍선을 만드는 예제입니다.
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// Quadratric curves example
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
// ctx.quadraticCurveTo(25, 100, 50, 100);
// ctx.quadraticCurveTo(50, 120, 30, 125);
// ctx.quadraticCurveTo(60, 120, 65, 100);
// ctx.quadraticCurveTo(125, 100, 125, 62.5);
// ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(275, 25);
ctx.quadraticCurveTo(225, 25, 225, 62.5);
ctx.quadraticCurveTo(225, 100, 250, 100);
// ctx.quadraticCurveTo(250, 120, 230, 125);
// ctx.quadraticCurveTo(260, 120, 265, 100);
// ctx.quadraticCurveTo(325, 100, 325, 62.5);
// ctx.quadraticCurveTo(325, 25, 275, 25);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(475, 25);
ctx.quadraticCurveTo(425, 25, 425, 62.5);
ctx.quadraticCurveTo(425, 100, 450, 100);
ctx.quadraticCurveTo(450, 120, 430, 125);
// ctx.quadraticCurveTo(260, 120, 265, 100);
// ctx.quadraticCurveTo(325, 100, 325, 62.5);
// ctx.quadraticCurveTo(325, 25, 275, 25);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(675, 25);
ctx.quadraticCurveTo(625, 25, 625, 62.5);
ctx.quadraticCurveTo(625, 100, 650, 100);
ctx.quadraticCurveTo(650, 120, 630, 125);
ctx.quadraticCurveTo(660, 120, 665, 100);
// ctx.quadraticCurveTo(325, 100, 325, 62.5);
// ctx.quadraticCurveTo(325, 25, 275, 25);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(875, 25);
ctx.quadraticCurveTo(825, 25, 825, 62.5);
ctx.quadraticCurveTo(825, 100, 850, 100);
ctx.quadraticCurveTo(850, 120, 830, 125);
ctx.quadraticCurveTo(860, 120, 865, 100);
ctx.quadraticCurveTo(925, 100, 925, 62.5);
// ctx.quadraticCurveTo(325, 25, 275, 25);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(1075, 25);
ctx.quadraticCurveTo(1025, 25, 1025, 62.5);
ctx.quadraticCurveTo(1025, 100, 1050, 100);
ctx.quadraticCurveTo(1050, 120, 1030, 125);
ctx.quadraticCurveTo(1060, 120, 1065, 100);
ctx.quadraticCurveTo(1125, 100, 1125, 62.5);
ctx.quadraticCurveTo(1125, 25, 1075, 25);
ctx.stroke();
}
}
3. 삼차 베지어 곡선 (Cubic Bezier curves) 예제
이 예제는 삼차 곡선을 이용하여 하트를 그립니다.
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// Cubic curves example
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
// ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
// ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
// ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
// ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
// ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(275, 40);
ctx.bezierCurveTo(275, 37, 270, 25, 250, 25);
ctx.bezierCurveTo(220, 25, 220, 62.5, 220, 62.5);
// ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
// ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
// ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
// ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(475, 40);
ctx.bezierCurveTo(475, 37, 470, 25, 450, 25);
ctx.bezierCurveTo(420, 25, 420, 62.5, 420, 62.5);
ctx.bezierCurveTo(420, 80, 440, 102, 475, 120);
// ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
// ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
// ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(675, 40);
ctx.bezierCurveTo(675, 37, 670, 25, 650, 25);
ctx.bezierCurveTo(620, 25, 620, 62.5, 620, 62.5);
ctx.bezierCurveTo(620, 80, 640, 102, 675, 120);
ctx.bezierCurveTo(710, 102, 730, 80, 730, 62.5);
// ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
// ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(875, 40);
ctx.bezierCurveTo(875, 37, 870, 25, 850, 25);
ctx.bezierCurveTo(820, 25, 820, 62.5, 820, 62.5);
ctx.bezierCurveTo(820, 80, 840, 102, 875, 120);
ctx.bezierCurveTo(910, 102, 930, 80, 930, 62.5);
ctx.bezierCurveTo(930, 62.5, 930, 25, 900, 25);
// ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(1075, 40);
ctx.bezierCurveTo(1075, 37, 1070, 25, 1050, 25);
ctx.bezierCurveTo(1020, 25, 1020, 62.5, 1020, 62.5);
ctx.bezierCurveTo(1020, 80, 1040, 102, 1075, 120);
ctx.bezierCurveTo(1110, 102, 1130, 80, 1130, 62.5);
ctx.bezierCurveTo(1130, 62.5, 1130, 25, 1100, 25);
ctx.bezierCurveTo(1085, 25, 1075, 37, 1075, 40);
ctx.stroke();
}
}
**참고 사이트 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial
반응형
'HTML' 카테고리의 다른 글
| HTML <canvas> Path2D 오브젝트 (Path2D objects) (0) | 2022.04.25 |
|---|---|
| HTML <canvas> rect() 함수 - 직사각형 그리기 (0) | 2022.04.25 |
| HTML <canvas> arc(), arcTo() 함수 - 호나 원 그리기 (0) | 2022.04.25 |
| HTML <canvas> lineTo() 함수 - 직선 그리기 (0) | 2022.04.25 |
| HTML <canvas> moveTo()함수 - 펜 이동하기 (0) | 2022.04.25 |
