css:
<style>
body{
text-align: center;
}
canvas{
background: #ddd;
}
</style>
canvas标签:
<canvas );
//开始路径

//张嘴函数
function openMouth(){
canvas.beginPath();
canvas.arc(250,200,100,30*Math.PI/180,330*Math.PI/180);
canvas.lineTo(250,200);
canvas.fillStyle = "yellow";
canvas.fill();
canvas.closePath();
canvas.stroke();
//眼睛
canvas.beginPath();
canvas.arc(270,150,25,Math.PI*2,false);
canvas.fillStyle = "#38f";
canvas.fill();
canvas.stroke();
//眼神
canvas.beginPath();
canvas.arc(275,140,8,Math.PI*2,false);
canvas.fillStyle = "white";
canvas.fill();
canvas.stroke();
}
//openMouth();
//闭嘴函数
function closeMouth(){
canvas.beginPath();
canvas.arc(250,200,100,0,2*Math.PI);
canvas.fillStyle = "orange";
canvas.fill();
canvas.lineTo(250,200);
canvas.stroke();
//眼睛
canvas.beginPath();
canvas.arc(260,150,25,Math.PI*2,false);
canvas.fillStyle = "#38f";
canvas.fill();
canvas.stroke();
//眼神
canvas.beginPath();
canvas.arc(270,145,8,Math.PI*2,false);
canvas.fillStyle = "white";
canvas.fill();
canvas.stroke();
}
// closeMouth();
//定是闭嘴或者张嘴
var index = 1 ;
var timer = setInterval(function(){
canvas.clearRect(0,0,500,400);
index ++;
if(index%2==0){
openMouth();
}else{
closeMouth();
}
},1000);

相关文章:

  • 2021-12-04
  • 2021-09-29
  • 2021-12-22
  • 2022-12-23
  • 2021-12-02
  • 2021-07-25
猜你喜欢
  • 2021-06-15
  • 2021-11-21
  • 2021-10-16
  • 2022-12-23
  • 2021-12-13
  • 2021-06-14
  • 2022-12-23
相关资源
相似解决方案