canvas-绘制笑脸，张嘴闭嘴

canvas-绘制笑脸，张嘴闭嘴

<canvas id="c3" width="500" height="400"></canvas>
  <script>
    var c3=document.getElementById("c3");
    var ctx=c3.getContext("2d");
    // 闭嘴笑脸
    function closeM(){
      ctx.clearRect(0,0,500,400)
      // 1.绘制最外层轮廓圆脸
      ctx.beginPath();
      ctx.strokeStyle="#f35"
      ctx.arc(250,200,100,0,2*Math.PI);
      // 2.绘制闭嘴
      ctx.lineTo(250,200)
      ctx.stroke();
      // 3.绘制实心眼球
      ctx.beginPath();
      ctx.fillStyle="#a32";
      ctx.arc(270,155,20,0,2*Math.PI);
      ctx.fill();
      // 4.绘制实心眼神
      ctx.beginPath();
      ctx.fillStyle="#fff";
      ctx.arc(278,160,10,0,2*Math.PI) ;
      ctx.fill()
      // 4.1眼珠
      ctx.beginPath();
      ctx.fillStyle="#000";
      ctx.arc(283,163,5,0,2*Math.PI) ;
      ctx.fill()
    }
    // 张嘴笑脸
    function openM(){
      ctx.clearRect(0,0,500,400);
      // 1.绘制最外层轮廓圆脸
      ctx.beginPath();
      ctx.strokeStyle="#f35"
      ctx.arc(250,200,100,30*Math.PI/180,340*Math.PI/180);
      // 2.绘制闭嘴
      ctx.lineTo(250,200);
      // 闭合路径 结束点到开始点
      ctx.closePath();
      ctx.stroke();
      // 3.绘制实心眼球
      ctx.beginPath();
      ctx.fillStyle="#a32";
      ctx.arc(270,155,20,0,2*Math.PI);
      ctx.fill();
      // 4.绘制实心眼神
      ctx.beginPath();
      ctx.fillStyle="#fff";
      ctx.arc(278,160,10,0,2*Math.PI) ;
      ctx.fill()
      // 4.1眼珠
      ctx.beginPath();
      ctx.fillStyle="#000";
      ctx.arc(283,163,5,0,2*Math.PI) ;
      ctx.fill()
    } 
    //openM()  closeM()
    // 1.创建变量数值
    var index=0;
    // 2.创建定时器
    var t=setInterval(()=>{
       // 3数值自增
       index++;
    // 4.偶数 张嘴
    if(index%2==0){
      openM();
    }else{
     // 5.奇数 闭嘴 
     closeM();
    }
    
    },500)
   
  </script>