14. HTML5 Canvas [Path,quadraticCurveTo,bezier curve]

Hello Canvas!!

How to use Path,quadraticCurveTo,bezier curve

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

[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'); //context.moveTo(begin_x,begin_y); //context.quadraticCurveTo(controll_x, control_y, end_x, end_y); context.beginPath(); context.moveTo(100, 20); // line 1 context.lineTo(200, 160); // quadratic curve context.quadraticCurveTo(230, 200, 250, 120); /*bezierCurveTo(cx1,cy1, cx2,cy2, ex,ey) 3차 베지에 곡선 context.bezierCurveTo( 현재 end_x_controlBar, 현재 end_y_controlBar, 현재 start_x_controlBar, 현재 start_y_controlBar, 현제곡선의 end_x(다음곡선의 start_x), 현제곡선의 end_y(다음곡선의 start_y) );*/ //begin custom shape // bezier curve context.bezierCurveTo(290, -40, 300, 200, 400, 150); // line 2 context.lineTo(500, 90); context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke(); context.beginPath(); context.moveTo(100, 100); // line 1 context.lineTo(200, 260); // quadratic curve context.quadraticCurveTo(230, 300, 250, 220); // bezier curve context.bezierCurveTo(290, 60, 300, 300, 400, 250); // line 2 context.lineTo(500, 190); 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