前言

今天已经是学习canvas的第四天了，通过这几天的学习，掌握了一些canvas的基础api，能进行简单图形的绘制，今天的学习目标如下：

使用arc绘制圆弧
完成一个小案例--绘制笑脸

使用arc绘制圆弧

arc(x,y,r,startAngle,endAngle,anticlockwise)方法共接收6个参数

x表示圆心的x轴坐标
y表示圆心的y坐标
startAngle表示圆弧的起点，单位以弧度计算
endAngle表示圆弧的终点，单位以弧度计算
anticlockwise为boolean类型可选项，取值为true则表示逆时针绘制，反之则表示顺时针绘制，默认顺时针绘制(默认值为false)

注意：startAngle和endAngle可以通过角度转换公式进行转换，弧度*Math.PI/180

了解完arc对应参数的含义，接下来就开始绘制一个圆弧：

    const cav = document.createElement('canvas');

    cav.width = 400;

    cav.height = 400;

    document.body.appendChild(cav);

    const ctx = cav.getContext('2d');

    ctx.arc(100,100,50,0,180  * Math.PI / 180);

    ctx.stroke()

执行代码，结果如下图所示：

圆弧.png

arc还可以用来绘制圆形

 const cav = document.createElement('canvas');

    cav.width = 400;

    cav.height = 400;

    document.body.appendChild(cav);

    const ctx = cav.getContext('2d');

    ctx.arc(100,100,50,0,2 * Math.PI);

    ctx.stroke()

只需要将180 * Math.PI / 180替换成2 * Math.PI即可绘制一个圆形

圆形.png

绘制笑脸

了解了如何绘制一个圆形，接下来就开始着手完成一个小案例，来绘制一个笑脸，开始绘制前，先来看看最终的效果：

笑脸.png

首先绘制出最外侧的大圆

    const cav = document.createElement('canvas');
    cav.width = 600;
    cav.height = 600;
    document.body.appendChild(cav);
    
    const ctx = cav.getContext('2d'); 
    ctx.arc(300,300,0,2 * Math.PI);
    ctx.stroke()

圆形.png

绘制眼睛

// 左边眼睛
      ctx.beginPath();
      ctx.arc(250, 250, 20, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.closePath();

// 右边眼睛
      ctx.beginPath();
      ctx.arc(350, 250, 20, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.closePath();

绘制鼻子

      ctx.beginPath();
      ctx.arc(300, 300, 20, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.closePath();

绘制嘴巴

最后把嘴巴绘制出来，就能得到一个完整的笑脸

      ctx.beginPath();
      ctx.arc(300, 300, 80, 0, Math.PI);
      ctx.stroke();
      ctx.closePath();