当前位置： 移动技术网 > IT编程>开发语言>JavaScript > canvas实现绘制吃豆鱼效果

canvas实现绘制吃豆鱼效果

2019年03月30日  | 移动技术网IT编程  | 我要评论

话不多说，请看代码：

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>canvas吃豆鱼</title>
 </head>
 <style>
 body{
 text-align:center;
 }
 canvas{
 background: #efefef;
 } 
 </style>
 <body>
 <h1>
 角度转为弧度：<br />
 弧度=2*pi*角度/360=角度*pi/180
 </h1>
 <!--画布的宽和高只能使用属性，不能使用样式-->
 <canvas id='a1' width="500" height="400"></canvas>
 </body>
</html>
<script>
 var ctx=a1.getcontext('2d');//得到画布上的画笔并设置绘制方式
 function openmouse(){
 //绘制圆（3/4）
 ctx.beginpath();//开始一条路径
 ctx.arc(250,200,100,45*math.pi/180,315*math.pi/180);//圆心为（250,200），半径为100
 ctx.lineto(250,200);
 ctx.closepath();
 ctx.stroke();//勾勒轮廓/描边
 ctx.fillstyle='#00ffff';
 ctx.fill();
 eye();
 }
 //openmouse();
 function closemouse(){
 ctx.beginpath();//开始一条路径
 ctx.arc(250,200,100,0*math.pi/180,360*math.pi/180);//圆心为（250,200），半径为100
 ctx.lineto(250,200);
 ctx.closepath();
 ctx.stroke();//勾勒轮廓/描边
 ctx.fillstyle='#00ffff';
 ctx.fill();
 eye();
 }
 //closemouse();
 //绘制公共部分眼睛
 function eye(){
 //绘制眼睛
 ctx.beginpath();
 ctx.arc(250,200-100/2,25,0,2*math.pi);//眼睛半径为25
 ctx.stroke();
 ctx.fillstyle='#001900';
 ctx.fill();
 //绘制眼神光
 ctx.beginpath();
 ctx.arc(265,140,5,0,2*math.pi);//眼神光半径为5
 ctx.stroke();
 ctx.fillstyle='#ffffff';
 ctx.fill();
 }
 var isopen=true;//定义变量isopen：是否张开
 var timer=setinterval(function(){
 var ctx=a1.getcontext('2d');
 ctx.clearrect(0,0,500,400);//清空画布大小
 if(isopen){
 closemouse();
 isopen=false;
 }else{
 openmouse();
 isopen=true;
 }
 },500);
</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网