通过HTML5 Canvas API绘制弧线和圆形的教程

1. <script type="text/javascript">    //获取Canvas对象(画布)   
2. var canvas = document.getElementById("myCanvas");    //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
3. if(canvas.getContext){          //获取对应的CanvasRenderingContext2D对象(画笔)   
4.     var ctx = canvas.getContext("2d");             
5.     //开始一个新的绘制路径        ctx.beginPath();   
6.     //设置弧线的颜色为蓝色        ctx.strokeStyle = "blue";   
7.     var circle = {            x : 100,    //圆心的x轴坐标值   
8.         y : 100,    //圆心的y轴坐标值            r : 50      //圆的半径   
9.     };        //沿着坐标点(100,100)为圆心、半径为50px的圆的逆时针方向绘制弧线   
10.     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, true);            //按照指定的路径绘制弧线   
11.     ctx.stroke();    }   
12. </script>  

对应的显示效果如下：

使用canvas沿着逆时针方向绘制弧线

使用canvas绘制圆形

当我们学会了绘制弧线之后，举一反三，我们想要绘制圆形自然也不在话下，只需要将上述代码的结束弧度改为2π即可。