今天用canvas实现了一个奥运五环，展现在我们眼前虽然是简简单单的圆，但实际上加深了arc中的度数的参数的理解。
<!DOCTYPE HTML> <html> <head> <title>奥运五环</title> <meta charset="UTF-8"> </head> <body> <canvas id="myCanvas" width="400" height="200" style="border:1px solid #c3c3c3;"> Your Browser does not support the canvas element. </canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.lineWidth=5; context.strokeStyle="#163B62"; context.beginPath(); context.arc(80,60,50,0,Math.PI*2,false); context.closePath(); context.stroke(); context.strokeStyle="#000000"; context.beginPath(); context.arc(200,60,50,0,Math.PI*2,false); context.closePath(); context.stroke(); context.strokeStyle="#BF0628"; context.beginPath(); context.arc(320,60,50,0,Math.PI*2,false); context.closePath(); context.stroke(); context.strokeStyle="#EBC41F"; context.beginPath(); context.arc(140,110,50,0,Math.PI*2,false); context.closePath(); context.stroke(); context.strokeStyle="#198E4A"; context.beginPath(); context.arc(260,110,50,0,Math.PI*2,false); context.closePath(); context.stroke(); context.strokeStyle="#163B62"; context.beginPath(); context.arc(80,60,50,Math.PI*1.99,Math.PI*2.025,false); context.closePath(); context.stroke(); context.strokeStyle="#000000"; context.beginPath(); context.arc(200,60,50,Math.PI*1.99,Math.PI*2.025,false); context.closePath(); context.stroke(); context.strokeStyle="#000000"; context.beginPath(); context.arc(200,60,50,Math.PI*2.56,Math.PI*2.60,false); context.closePath(); context.stroke(); context.strokeStyle="#BF0628"; context.beginPath(); context.arc(320,60,50,Math.PI*2.56,Math.PI*2.6,false); context.closePath(); context.stroke(); </script> </body> </html>
这里面有一个知识点是五环的相互嵌套，其实弧度的绘制，也是arc的运用，arc这个方法的定义：
void arc(
in float x,
in float y,
in float radius,
in float startAngle,
in float endAngle,
in boolean anticlockwise)
x，y是圆心的地址，radius是圆的半径，startAngle是绘制的弧度的起始的角度，endAngle是终点的角度，两者之间就是我们需要绘制的弧度，最后一个参数是逆时针还是顺时针。
