canvas：绘制动画——长嘴、闭嘴吃豆人

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>canvas{background:#9AA4FF;}</style>
</head>
<body>
<h3>canvas画布：绘制动画——吃豆人</h3><canvas id="HuaBu">您的浏览器不支持canvas画布
</canvas><script src="js/jquery-1.11.1.js"></script>
<script>var w=600;var h=400;HuaBu.width=w;     //画布的宽HuaBu.height=h;    //画布的宽//创建画布var ctx=HuaBu.getContext("2d");openMouth();// closeMouth();var isOpen=true;    //是否处于张嘴状态setInterval(function () {if(isOpen){closeMouth();isOpen=false;}else{ctx.clearRect(0,0,800,400);    //清除画布openMouth();isOpen=true;}},500);//吃豆人张嘴function openMouth() {//外围轮廓：半圆环+斜线到圆心+闭合ctx.beginPath();ctx.arc(300,200,110,Math.PI/4,7*Math.PI/4);ctx.lineTo(300,200);ctx.closePath();ctx.stroke();ctx.fillStyle='#fea';ctx.fill();//眼睛的外框ctx.beginPath();ctx.arc(300,150,25,0,2*Math.PI);ctx.stroke();ctx.fillStyle='#38f';ctx.fill();//两个眼神光ctx.beginPath();ctx.arc(312,140,5,0,2*Math.PI);ctx.arc(306,131,3,0,2*Math.PI);ctx.fillStyle='#fff';ctx.fill();}//吃豆人闭嘴function closeMouth() {//外围轮廓：圆环+斜线到圆心+闭合ctx.beginPath();ctx.arc(300,200,110,0,2*Math.PI);ctx.closePath();ctx.lineTo(300,200);ctx.fillStyle='#fea';ctx.fill();ctx.stroke();//眼睛的外框ctx.beginPath();ctx.arc(300,150,25,0,2*Math.PI);ctx.stroke();ctx.fillStyle='#38f';ctx.fill();//两个眼神光ctx.beginPath();ctx.arc(312,140,5,0,2*Math.PI);ctx.arc(306,131,3,0,2*Math.PI);ctx.fillStyle='#fff';ctx.fill();}</script></body>
</html>

效果图：

canvas：绘制动画——长嘴、闭嘴吃豆人相关推荐

小游戏之欢乐吃豆人canvas重制版
前言 <Pac-Man>上一次已经写过了,但是用vue写的,整体下来能玩,但是自己感觉不算流畅,而且游戏计算方面也有点欠缺,感兴趣的可看我上一篇文章.这次我又卷土重来,在三四天内用空闲时间 ...
Canvas绘制动画
给大家分享一个用Canvas写的"小人吃豆"的动画,效果如下: 哈哈,实现代码如下: <!DOCTYPE html> <html><head lang ...
HTML5吃豆人在画布移动制作,js+canvas实现动态吃豆人效果
效果图: 代码如下: 吃豆人V01 var canvas = document.getElementById("canvas"); var context = canvas.get ...
纯CSS做一个吃豆人动画
我们先来看看将要实现的效果: 可以单击这个链接打开查看效果和代码:https://codepen.io/sd237720488/pen/LMyNxJ 接下来我们来看看怎么实现的,首先它可以分为两 ...
吃豆人动态模型创建---canvas
吃豆人模型吃豆人是我们小时候常玩的街机游戏,常常能勾起我们童年的回忆,写这些文章也是为了记录学习,保留回忆的,如果可以帮助到你们也会很开心,可能内容有些太基础,希望不要介意. 因为不是一个完整的小游 ...
python制作简单动画_Python tkinter Canvas绘制动画
其实前面程序中的高亮显示已经是动画效果了.程序会用红色.黄色交替显示几何图形的边框,这样看上去就是动画效果了.实现其他动画效果也是这个原理,程序只要增加一个定时器,周期性地改变界面上图形项的颜色.大小 ...
错觉图片生成实验 - 会动的吃豆人
(图书介绍:童晶:<C和C++游戏趣味编程>新书预告) 这学期的线下C语言课程,大一同学们学完旋转蛇案例后(童晶:第4章旋转蛇(<C和C++游戏趣味编程>配套教学视频)),布 ...
游戏开发经典样例 | web html5 吃豆人游戏
很早就知道canvas,当时一直没应用到,最近闲来无事就顺便写写看.吃豆游戏可以说是我们80,90后共同的回忆录,小时候常常在学习机上玩,所以也就有了强烈的欲望去写.为了写这个游戏,看了很多吃豆人游戏 ...
【历史上的今天】1 月 25 日：电子游戏起源；《吃豆人》作者出生；“蠕虫王”问世
整理 | 王启隆透过「历史上的今天」,从过去看未来,从现在亦可以改变未来. 今天是 2022 年 1 月 25 日,在 1979 年的今天,史上发生首例机器人致死事件.美国密歇根州的罗伯特·威廉姆斯 ...

canvas：绘制动画——长嘴、闭嘴吃豆人

canvas：绘制动画——长嘴、闭嘴吃豆人相关推荐

最新文章

热门文章