13. HTML5 Canvas [quadraticCurveTo,fillStyle]

Hello Canvas!!

How to use quadraticCurveTo

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

[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, 150); context.quadraticCurveTo(100, 0, 300, 150); context.quadraticCurveTo(400, 175, 300, 200); context.quadraticCurveTo(400, 225, 300, 250); context.quadraticCurveTo(400, 275, 300, 300); context.quadraticCurveTo(400, 325, 300, 350); context.quadraticCurveTo(100, 200, 100, 350); context.quadraticCurveTo(100, 150, 100, 150); context.lineWidth = 10; context.moveTo(400, 100); context.quadraticCurveTo(475, 0, 550, 100); context.moveTo(400, 150); context.quadraticCurveTo(475, 0, 550, 150); context.moveTo(400, 200); context.quadraticCurveTo(475, 0, 550, 200); context.moveTo(400, 250); context.quadraticCurveTo(475, 0, 550, 250); context.moveTo(400, 300); context.quadraticCurveTo(475, 0, 550, 300); context.moveTo(400, 350); context.quadraticCurveTo(475, 0, 550, 350); //line color context.strokeStyle = 'black'; context.stroke(); context.fillStyle = 'blue'; context.font = 'bold 30pt Tahoma'; context.fillText('quadraticCurveTo', 200, 380); context.fillStyle = 'red'; context.font = '10pt Tahoma'; context.fillText('begin_y=100, end_y=100', 380, 100); context.fillStyle = 'orange'; context.fillText('begin_y=150, end_y=150', 380, 150); context.fillStyle = 'yellow'; context.fillText('begin_y=200, end_y=200', 380, 200); context.fillStyle = 'green'; context.fillText('begin_y=250, end_y=250', 380, 250); context.fillStyle = 'deepblue'; context.fillText('begin_y=300, end_y=300', 380, 300); context.fillStyle = 'purple'; context.fillText('begin_y=350, end_y=350', 380, 350); </script>

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