HTML5 Canvas眨眼睛动画
2014-01-20 23:12
369 查看
效果请看:
http://keleyi.com/a/bjad/p9exlcwi.htm
请使用支持HTML5的浏览器查看效果。
以下是代码:
web前端:/article/4797642.html
http://keleyi.com/a/bjad/p9exlcwi.htm
请使用支持HTML5的浏览器查看效果。
以下是代码:
<html> <body> <canvas width="300" height="300" id="keleyieye" style="background:black"></canvas> </body> </html> <script> var keleyieye = document.getElementById('keleyieye'); var graphics = keleyieye.getContext('2d'); var centerX = keleyieye.width/2; var centerY = keleyieye.height/2; //设置角度值,同时也就眼睛的横坐标长度 var angle = 300; //因为眨眼采用的sin()函数组成,所以其自然有幅值这一个属性。 var amplitude = 30; //创建一个用于保存幅值的变化的变量,采用amplitude的缩写ampl,便于认识 ^_^ var ampl = 20; //灰眼球的半径 var blackBallSemi = 25; var flag = true; function paint() { if (flag) { ampl++; if (ampl >= amplitude) { flag = false; } }else { ampl--; if (ampl <= 0) { flag = true; } } //以centerX,centerY为中心,在眼睛所在的地方绘制一个白色的背景底色, //长度为angle,宽为amplitude*2 graphics.fillStyle="white"; graphics.fillRect(centerX-angle/2, centerY-amplitude, angle, amplitude*2); //以centerX,centerY为中心,绘制一个灰色的眼球 //半径为blackBallSemi*2 graphics.beginPath(); graphics.fillStyle="black"; graphics.arc(centerX, centerY, blackBallSemi,0,Math.PI*2,true); graphics.fill(); graphics.beginPath(); //以centerX,centerY为中心,绘制一个白色的瞳孔 //半径为blackBallSemi/2 graphics.fillStyle="white"; graphics.arc(centerX,centerY, blackBallSemi/4,0,Math.PI*2,true); graphics.fill(); graphics.strokeStyle="red"; for (var i = 0; i < angle; i++) { graphics.moveTo(centerX-angle/2+i,centerY-30); graphics.lineTo(centerX-angle/2+i, centerY-(Math.floor(Math.sin(Math.PI*i/angle)*ampl))); graphics.moveTo(centerX-angle/2+i,centerY+30); graphics.lineTo(centerX-angle/2+i,centerY+(Math.floor(Math.sin(Math.PI*i/angle)*ampl))); graphics.stroke(); } } // paint(); setInterval(paint,30); </script>
web前端:/article/4797642.html
相关文章推荐
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf1
- HTML5 Canvas画图与动画学习59例
- HTML5 Canvas超炫酷烟花动画!
- 分享8款令人惊叹的HTML5 Canvas动画特效
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf6
- Canvas 3D engine_HTML5动画引擎
- HTML5 canvas绘制雪花飘落动画(需求分析、知识点、程序编写分布详解)
- html5 canvas气泡动画
- 『HTML5梦幻之旅』 - 舞动色彩,Canvas下实现颜色动画
- HTML5 Canvas绘图与动画学习59例
- HTML5 Canvas绘文本动画(使用CSS自定义字体)
- 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习
- 【html5】如何用Html5中的canvas模拟小球三维运动动画呢?
- [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球
- JavaScript+html5 canvas实现图片破碎重组动画特效
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf5
- 精选6款神奇的HTML5 Canvas动画特效
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8