Canvas plotting of HTML5-different painting methods of semi-circles and Arcs

In the blog I wrote yesterday, I wrote the method of using canvas to draw circles in HTML5. I tried to draw a smiling face last night. In fact, it is quite simple to draw two solid circles for eyes, this simple smiling face is finished when a semi-circular arc is made into the mouth, but a problem occurs during the mouth preparation:

 <!  Doctype html  >  <  Html  >   <  Head  >      <  Meta  Charset  = "UTF-8"  >      < Title  > Canvas </  Title  >   </  Head  >   <  Style  Type  = "Text/CSS"  >  Body  {  Margin :  20px auto  ;  Padding  :  0  ;  Width  :  800px  ;   } Canvas  {  Border  :  Dashed 2px # ccc  }   </  Style  >   <  Script  Type  = "Text/JavaScript"  >     Function  $ (ID ){  Return  Document. getelementbyid (ID );}  Function  Pageload (){  VaR  Can  =  $ (  ' Can  '  );  VaR  Cans  =  Can. getcontext (  '  2d  '  ); Cans. beginpath (); cans. ARC ( 400  ,  300  ,  200  ,  0  , Math. Pi,  1  ); Cans. closepath (); cans. strokestyle  =  '  Red  '  ; Cans. linewidth  =   10  ; Cans. Stroke ();}  </  Script  >  <  Body  Onload = "Pageload ();"  >      <  Canvas  ID  = "Can"  Width  = "800px"  Height  = "600px"  > </  Canvas  >  </  Body  >  </ Html  > 

I have been reading a book over the past few days-tao guorong's HTML5 practice. An example of smiling faces in this book makes me realize that the method is simple and makes me feel ashamed ~~~

First view the effect, thenCode

 <!  Doctype html  >  <  Html  >   <  Head  >      <  Meta  Charset = "UTF-8"  >      <  Title  > Canvas </  Title  >   </  Head  >   <  Style  Type  = "Text/CSS"  > Body  {  Margin  :  20px auto  ;  Padding  :  0  ;  Width  : 800px  ;   }  Canvas  {  Border  :  Dashed 2px # ccc  }   </  Style  >   < Script  Type  = "Text/JavaScript"  >      Function  $ (ID ){  Return  Document. getelementbyid (ID );}  Function  Pageload (){  VaR  Can =  $ (  '  Can  '  );  VaR  Cans  =  Can. getcontext (  '  2d '  ); Cans. beginpath (); cans. ARC (  400  ,  300  ,  200  ,  0  , Math. Pi,  1 ); Cans. strokestyle  =   '  Red  '  ; Cans. linewidth  =   10  ; Cans. Stroke (); cans. closepath ();}  </  Script  > <  Body  Onload  = "Pageload ();"  >      <  Canvas  ID  = "Can"  Width  = "800px"  Height  = "600px"  > </  Canvas  >  </ Body  >  </  Html  > 

OK, so that the smiling face of my mouth can be realized ~~