js画布实现动态吃豆人效果

效果图：

代码如下：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '标题吃豆人v01/title/headdycanvas id=' canvas ' width=' 500 px ' height=' 500 px ' style=' border : 1px纯黑'/拉票脚本var canvas=文档。getelementbyid(' canvas ')；var上下文=canvas。get context(' 2d ')；//TODO面向对象方式解析//TODO 1 .创建吃豆人的对象模板函数Pacman(){ //TODO属性this.isOpen=true//TODO开关这个. start=45 *数学.PI/180；this.end=315*Math .PI/180；//TODO方法//TODO 1 .绘制方法this.paint=function(){ //TODO吃豆人的脸语境。begin path()；context.arc(250，200，100，this.start，this。结束)；context.lineTo(250，200)；语境。close path()；context.fillStyle='黄色；语境。fill()；语境。笔画()；//TODO吃豆人的眼睛语境。begin path()；context.arc(250，150，15，0，数学.PI * 2)；context . FillStyle=' black context。fill()；//TODO吃豆人的眼神语境。begin path()；context.arc(255，145，5，0，数学.PI * 2)；context . FillStyle=' white context。fill()；} //TODO 2 .控制开闭切换这个。open=function(){ if(this。isopen){//TODO开口这个. start=45 *数学.PI/180；this.end=315*Math .PI/180；this.isOpen=false}else{//TODO闭口这个。start=0；这个。结束=数学* 2；this.isOpen=true} } } //TODO创建吃豆人的对象var Pacman=new Pacman()；//TODO核心控制器setInterval(函数(){ context。清除矩形(0，0，canvas.width，canvas。高度)；吃豆人。paint()；吃豆人。open()；},200);/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！