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 相关文章推荐
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
node.js实现端口转发
Apr 14 Javascript
localStorage实现便签小程序
Nov 28 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 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
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php实现socket推送技术的示例
2017/12/20 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
js实现搜索栏效果
2018/11/16 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
实现Python与STM32通信方式
2019/12/18 Python
Python中Selenium模块的使用详解
2020/10/09 Python
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
2014年银行个人工作总结
2014/12/05 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
爱心捐书倡议书
2015/04/27 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL