canvas绘制会动的嘴巴~

最新推荐文章于 2025-05-23 20:42:37 发布

qq_24618061

最新推荐文章于 2025-05-23 20:42:37 发布

阅读量262

点赞数

分类专栏： web前端文章标签： javascript canvas web

本文链接：https://blog.csdn.net/qq_24618061/article/details/121567694

版权

web前端专栏收录该内容

14 篇文章

订阅专栏

运行效果图：

完整代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    canvas{
      background:#f2f2f2;
    }
  </style>
  <script></script>
 </head>
 <body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script>
  var ctx=canvas.getContext('2d');
  //绘制眼睛
  function eye(){
    ctx.beginPath();
    ctx.arc(250,125,50,0*Math.PI/180, 360*Math.PI/180);
    ctx.fillStyle="#00f";
    ctx.fill();
    ctx.closePath();
  }
  function openMouse(){
    ctx.clearRect(0,0,500,500);
    ctx.beginPath();
    ctx.arc(250,250,200,45*Math.PI/180,315*Math.PI/180);
    ctx.lineTo(250,250);
    ctx.closePath();
    ctx.stroke();
    eye();
  }
    function closeMouse(){
    ctx.clearRect(0,0,500,500);
    ctx.beginPath();
    ctx.arc(250,250,200,0,2*Math.PI);
    ctx.moveTo(250,250);
    ctx.lineTo(450,250);
    ctx.closePath();
    ctx.stroke();
    eye();
  }
  var state='open';
  setInterval(function(){
    if(state==='open'){
      closeMouse();
      state='close';
    }else{
      openMouse();
      state='open';
    }
  },500);
  
  </script>
 </body>
</html>