在网上发现一个java眨眼睛动画,把代码改成了HTML5 +JS,效果如下:
动画中有一些明显不足之处,请会的朋友指正,谢谢!
这里可以看效果:
http://www.108js.com/article/article3/view/30157/eye.html
代码如下:
<html>
<body>
<canvas width="300" height="300" id="canvas" style="background:black"></canvas>
</body>
</html>
<script>
var canvas = document.getElementById('canvas');
var graphics = canvas.getContext('2d');
var centerX = canvas.width/2;
var centerY = canvas.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>
下载源代码:
http://www.108js.com/article/article3/30157.html
- 大小: 1.9 KB
分享到:
相关推荐
酷炫的html5 canvas全屏背景动画特效
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
全屏背景动画的实现是由canvas完成
HTML5 Canvas粒子火焰动画特效,
在HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效,其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款...
jquery html5 canvas翻滚熔岩动画背景特效 jqueryhtml5 canvas翻滚熔岩动画背景特效
HTML5 Canvas表白爱心动画特效是一款浪漫酷炫的情人节告白爱心动画特效。
8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
HTML5 Canvas赛车游戏动画,赛车游戏动画演示。
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
html5 canvas毕达哥拉斯树生长动画特效 html5 canvas毕达哥拉斯树生长动画特效
html5 canvas熊熊火焰动画特效
超炫酷HTML5 Canvas蝴蝶飞舞动画 超炫酷HTML5 Canvas蝴蝶飞舞动画
Html5 canvas制作的赛车游戏动画,请注意是动画,没有交互等功能
HTML5 Canvas炫酷3D背景动画代码.
HTML5 Canvas绕月球动画特效是一款酷炫的卡通月球旋转动画特效下载。
我们可以在Canvas上绘制很多图形,也可以利用HTML技术在Canvas上制作一些复杂的动画,之前我们也分享过一些基于HTML5 Canvas的火焰动画,例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧...
html5 canvas小人跳舞动画特效
这是一款基于three.js+HTML5 Canvas绘制实现的龙卷风动画特效,虽然不是特别逼真,但也有模有样了。