12. HTML5 Canvas [Curves, arc]

Hello Canvas!!

How to use Curves, arc

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

arc Element로 웃는 얼굴을 그려 보았읍니다. ^^

[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'); var radius = 75; var startAngle = 1.1 * Math.PI; var endAngle = 1.9 * Math.PI; var startAngle1 = 0.1 * Math.PI; var endAngle1 = 0.9 * Math.PI; var counterClockwise = false; context.beginPath(); context.arc(100,200,radius,startAngle, endAngle, counterClockwise); context.arc(300,200,radius,startAngle, endAngle, counterClockwise); context.lineWidth = 15; context.strokeStyle = 'black'; context.stroke(); context.beginPath(); context.arc(100,190,radius,startAngle1, endAngle1,false); context.lineWidth = 15; context.strokeStyle = 'black'; context.stroke(); context.beginPath(); context.arc(300,190,radius,startAngle1, endAngle1, false); context.lineWidth = 15; context.strokeStyle = 'black'; context.stroke(); context.beginPath(); context.arc(100,220,0.7*radius,startAngle, endAngle,false); context.lineWidth = 15; context.strokeStyle = 'black'; context.stroke(); context.beginPath(); context.arc(300,220,0.7*radius,startAngle, endAngle, false); context.lineWidth = 15; context.strokeStyle = 'black'; context.stroke(); context.beginPath(); context.arc(200,280,1.5*radius,startAngle1, endAngle1, false); context.lineWidth = 15; context.strokeStyle = 'black'; context.stroke(); </script>

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