canvas实现绘制吃豆鱼效果
程序员文章站
2022-06-07 20:10:22
话不多说,请看代码:
话不多说,请看代码:
<!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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: JavaScript判断浏览器类型及版本