Html5制作奥运五环

使用html5的Canvas制作一个一模一样的奥运五环：

第一步：画圆

     在一切实验之前，要先理解Canvas中的坐标系统，假设一个宽是300，高是150的Canvas标签，它内部的坐标变化为，从左上角向下，向右越来越大。

    Canvas画圆的语法为:

   arc(x,y,radius,startAngle,endAngle,counterclockwise)

 

 利用以上方法，直接在Canvas中画五个圆环。

 <canvas id="myCanvas" style="border: 1px solid #c3c3c3; width: 400px; height: 200px;">
  你的浏览器不支持canvas
 </canvas>

 编写脚本如下：

<script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.arc(70, 70, 40, 0, Math.PI * 2, false);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(160, 70, 40, 0, Math.PI * 2, false);
        ctx.stroke();
        ctx