您的位置：首页 > 编程技术 > js  >  canvas实现绘制吃豆鱼效果

canvas实现绘制吃豆鱼效果

 更新时间：2017年1月16日 10:00  点击：1769

话不多说，请看代码：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

[!--infotagslink--]

相关文章

  • js canvas实现滑块验证

    这篇文章主要为大家详细介绍了js canvas实现滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-14

  • JavaScript+html5 canvas绘制的小人效果

    这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下...2016-01-29

  • JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)

    这篇文章主要介绍了JS基于ocanvas插件实现的简单画板效果,结合实例形式分析了ocanvas插件实现画板的相关技巧,并附代码demo源码供读者下载参考,需要的朋友可以参考下...2016-04-06

  • 微信小程序对图片进行canvas压缩的方法示例详解

    这篇文章主要给大家介绍了关于微信小程序对图片进行canvas压缩的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-12

  • js canvas仿支付宝芝麻信用分仪表盘

    这篇文章主要为大家详细介绍了js canvas仿支付宝芝麻信用分仪表盘,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-11-22

  • 使用js和canvas实现时钟效果

    这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-09-08

  • WPF InkCanvas绘制矩形和椭圆

    这篇文章主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • Canvas实现放大镜效果完整案例分析(附代码)

    这篇文章主要介绍了Canvas实现放大镜效果完整案例分析(附代码),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-08

  • html+css+js实现canvas跟随鼠标的小圆特效源码

    这篇文章主要介绍了html+css+js实现canvas跟随鼠标的小圆特效源码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-15

  • 原生js canvas实现鼠标跟随效果

    这篇文章主要为大家详细介绍了原生js canvas实现鼠标跟随效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-02

  • JS使用canvas技术模仿echarts柱状图

    这篇文章主要介绍了JS使用canvas技术模仿echarts柱状图，对canvas感兴趣的同学，可以参考下...2021-04-30

  • js canvas实现圆形流水动画

    这篇文章主要为大家详细介绍了js canvas实现圆形流水动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-19

  • canvas绘制刮刮卡效果

    这篇文章主要为大家详细介绍了canvas绘制刮刮卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-07

  • js通过canvas生成图片缩略图

    对于生成缩略图一般做法是通过后端语言php等来生成，但是为了给服务器减压，我们或许可以从前端来着手，先生成好不同尺寸的缩略图，传给后端，而后端只需要将前端传过来的图片进行存储就好了...2020-10-03

  • JS+canvas五子棋人机对战实现步骤详解

    这篇文章主要介绍了JS+canvas五子棋人机对战实现步骤详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-05

  • HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

    这篇文章主要介绍了HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-08-25

  • javascript利用canvas实现鼠标拖拽功能

    这篇文章主要为大家详细介绍了javascript利用canvas实现鼠标拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-07-24

  • JS+Canvas 实现下雨下雪效果

    本文给大家介绍基于JS+Canvas 实现下雨下雪效果，效果非常逼真，适应于各大网站，需要的朋友可以参考下...2016-05-20

  • javascript使用canvas实现饼状图效果

    这篇文章主要为大家详细介绍了javascript使用canvas实现饼状图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-09-08

  • JavaScript+html5 canvas制作的圆中圆效果实例

    这篇文章主要介绍了JavaScript+html5 canvas制作的圆中圆效果,结合完整实例形式分析了基于JavaScript与html5 canvas技术实现的图形绘制与颜色随机填充技巧,需要的朋友可以参考下...2016-01-29