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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
原生js实现弹出层效果
Jan 20 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
使用graphics.py实现2048小游戏
2015/03/10 Python
Python类的动态修改的实例方法
2017/03/24 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
python的flask框架难学吗
2020/07/31 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
激励口号大全
2014/06/17 职场文书
中秋晚会活动方案
2014/08/31 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
Python打包为exe详细教程
2021/05/18 Python
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
JS代码编译器Monaco使用方法
2021/06/11 Javascript