canvas实现绘制吃豆鱼效果
2017-01-12 16:35
651 查看
话不多说,请看代码:
<!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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
- JS+html5 canvas实现的简单绘制折线图效果示例
- SurfaceView与Canvas的结合实现简单的图形绘制与动画效果
- canvas.saveLayerAlpha实现“回”矩形框绘制效果
- rainday.js实现canvas绘制下雨的效果
- js实现canvas绘制的图形的拖动效果
- 前端OpenLayers实现阴影效果(canvas绘制)
- canvas——几行代码实现字体下落效果
- javascript不受canvas大小改动影响 实现绘制坐标轴
- HTML5 vedio标签与canvas的结合实现视频同步模糊效果
- Javascript与HTML5的canvas实现图片旋转效果
- Canvas编程练习:20几行js代码实现雷达扫描动画效果
- android翻书效果实现原理( 贝塞尔曲线绘制原理/点坐标计算)
- Wince中为元件注册鼠标事件以实现Canvas中的拖拽效果
- Wince中为元件注册鼠标事件以实现Canvas中的拖拽效果
- canvas实现时钟效果
- CSS+Canvas+jQury实现图片灰度渐变效果
- html5_canvas实现的渐变效果
- CSS+Canvas实现图片灰度效果,兼容所有浏览器
- 用canvas实现红心飘飘的动画效果