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实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
微信小程序实现单选功能
Oct 30 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 Javascript
微信小程序-小说阅读小程序实例(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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
PHP 读取和编写 XML
2014/11/19 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
python中的yield使用方法
2014/02/11 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
python模拟事件触发机制详解
2018/01/19 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
详解Python中的动态属性和特性
2018/04/07 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Python流程控制语句的深入讲解
2020/06/15 Python
python requests库的使用
2021/01/06 Python
ECHT官方网站:男女健身服
2020/02/14 全球购物
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
员工薪酬福利制度
2014/01/17 职场文书
土木工程求职信
2014/05/29 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
python如何获取网络数据
2021/04/11 Python