canvas实现绘制吃豆鱼效果


Posted in Javascript onJanuary 12, 2017

话不多说,请看代码:

<!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 相关文章推荐
JQuery对checkbox操作 (循环获取)
May 20 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
微信小程序-小说阅读小程序实例(demo)
Jan 12 #Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 #Javascript
JS实现仿百度文库评分功能
Jan 12 #Javascript
移动端基础事件总结与应用
Jan 12 #Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 #Javascript
简单的渐变轮播插件
Jan 12 #Javascript
那些精彩的JavaScript代码片段
Jan 12 #Javascript
You might like
使用dump函数,给php加断点测试
2013/06/25 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
js 动态加载事件的几种方法总结
2013/12/25 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
pygame实现简易飞机大战
2018/09/11 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Python创建字典的八种方式
2019/02/27 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
幼儿园国庆节活动方案
2014/02/01 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
学习经验交流会主持词
2014/04/01 职场文书
节约能源标语
2014/06/17 职场文书
学风建设演讲稿
2014/09/12 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书