8. HTML5 Canvas [bezierCurveTo, cloud_shape]

Hello Canvas!!

How to use bezierCurveTo, cloud_shape

베지에르곡선 완전 해부

소스보기해서 주석을 읽어보자

[SOURCE VIEW]

<canvas id = "myCanvas" width = "600" height = "400" style = "border:1px solid #000000"> If you can see this, I'm sorry. <br /> You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html"> Google Chrome browser</a> to see HTNL5 Canvas </canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); //quadraticCurveTo(sx,sy,ex,ey) 2차 베지에 곡선 //bezierCurveTo(cx1,cy1, cx2,cy2, ex,ey) 3차 베지에 곡선 //context.bezierCurveTo(끝점좌우, 끝점상하, 사작점좌우, 시작점상하, 좌우, 상하); //begin custom shape context.beginPath(); context.moveTo(170,80); //구름 시작점 context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); // complete custom shape context.closePath(); context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke(); context.beginPath(); context.moveTo(320,250); //타원 시작점 context.bezierCurveTo(320, 300, 450, 300, 450, 250); context.bezierCurveTo(450, 200, 320, 200, 320, 250); context.closePath(); context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke(); context.beginPath(); context.moveTo(10,100); //반원 시작점 context.bezierCurveTo(10, 150, 140, 150, 140, 100); context.closePath(); context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke(); context.beginPath(); context.moveTo(150,200);//시작점 하트 context.bezierCurveTo(250, 130, 280, 260, 150, 350); context.bezierCurveTo( 20, 260, 50, 130, 150,200); //context.bezierCurveTo(50, 150, 50, 200, 150, 350); context.closePath(); context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke(); </script>

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas

context.moveTo(170,80); //구름 시작점
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(끝점좌우조절바, 끝점상하조절바, 사작점좌우조절바, 시작점상하조절바, 끝점좌우, 끝점상하 (다음 요소의 시작점이 되기도 한다.));
이해가 안가면 종이에 연필로 점을 찍어보자 하트는 그림처럼 조절 바도 대칭임을 알수 있을 것이다.