canvas之绘制圆形

绘制圆形

<script>
    //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();
    //开始绘画圆形  参数分别是： 绘画起始的x坐标、绘画起始的y坐标、 半径的值 、绘制圆形的弧度、 是否是顺时针开始画
    //注意：弧度的值是通过Math.PI进行计算的

    //半圆
    // pencil.arc(200,200,100, 1 * Math.PI, true);

    //顺时针60°的圆弧
    // pencil.arc(200,200,100, (1/6) * Math.PI, true);

    //逆时针300°的圆弧
    pencil.arc(200,200,100, (1/6) * Math.PI, false);
    //是否闭合图形，自己设定。
    pencil.closePath();
    pencil.strokeStyle='#000';
    pencil.stroke();
</script>

综合案例

想绘制一个如下图的一个图形

下面进入是错的过程吧。。。。。。

<script>
    //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画

    //绘制第一个圆
    pencil.beginPath();
    pencil.arc(200,200,60, 2 *Math.PI, false);

    //绘制第二个圆
    pencil.arc(240,200,100,2 * Math.PI, false);
    pencil.strokeStyle='green';
    pencil.stroke();
</script>

测试了一下代码发现图形中多了一条线，如图：

经过分析：是第一个圆画完之后，画笔从终点滑倒第二个圆的起点。这个过程画笔是放在画布上的，所以留下了痕迹。就像：一笔画两个这样的圆一样。 所以要在画第二圆的时候 要重新设置画笔的起始路径。修改后代码

<script>
    //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画

    //绘制第一个圆
    pencil.beginPath();
    pencil.arc(200,200,60, 2 *Math.PI, false);
    pencil.strokeStyle='green';
    pencil.stroke();

    //绘制第二个圆
    //重新设定绘制路线
    pencil.beginPath();
    pencil.arc(240,200,100,2 * Math.PI, false);
    pencil.strokeStyle='green';
    pencil.stroke();

    //绘制第三个圆
    //重新设定绘制路线
    pencil.beginPath();
    pencil.arc(280,200,140,2 * Math.PI, false);
    pencil.strokeStyle='green';
    pencil.stroke();
</script>

最终得到期望的图形