在网上发现一个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全屏背景动画特效”的主题中，我们将深入探讨如何利用Canvas来创建引人注目的全屏动画背景，以及相关的编程技术和实践技巧。 一、Canvas基础 1. Canvas元素：HTML5引入的Canvas是一个二维绘图...
这个"html5 canvas小人跳舞动画特效"是一个利用Canvas API实现的交互式动画示例，它展示了如何通过编程方式创建动态、生动的视觉效果。 在Canvas中，我们可以使用`canvas.getContext('2d')`获取2D渲染上下文，然后...
在这个“HTML5 canvas爱心表白动画”项目中，开发者利用Canvas API构建了一个浪漫的动画场景，将编程技术与情感表达巧妙结合，为程序员提供了一种独特的方式来表达爱意。 首先，Canvas API是HTML5中的一个重要组成...
在这个“HTML5 Canvas龙卷风动画特效”项目中，开发者使用了Canvas API结合three.js库来实现了一种模拟龙卷风效果的动画。 首先，我们要理解HTML5 Canvas的基本概念。Canvas是一个HTML元素，通过JavaScript可以控制...
在“HTML5 Canvas表白爱心动画特效”这个项目中，开发者利用Canvas API创建了一种浪漫且酷炫的动画效果，非常适合情人节等特殊场合用来表达情感。 首先，Canvas API是HTML5引入的一个重要特性，它提供了一个2D渲染...
在本示例中，“html5 canvas多层波浪背景动画特效”是一个利用Canvas API实现的动态视觉效果，它可以为网页增添生动而引人入胜的背景。用户可以通过鼠标操作，如按住鼠标左右键或上下移动，来改变波浪的颜色和饱和度...
这款基于HTML5 Canvas的彩色渐变背景动画效果，是利用Canvas API来实现的一种互动性极强的视觉特效。当鼠标在画布上移动时，背景颜色会随着鼠标的移动而产生渐变变化，为用户提供了生动且引人入胜的交互体验。 首先...
在“html5，canvas赛车游戏动画”这个项目中，我们将探讨如何利用Canvas来构建一个静态的赛车游戏动画。 Canvas 提供了一系列的绘图方法，如`fillRect()`用于填充矩形，`beginPath()`和`stroke()`用于绘制路径，...
在IT行业中，HTML5、Canvas和JavaScript是创建交互式网页内容的重要工具，特别是对于实现动态图形和动画。本文将深入探讨如何使用原生JavaScript和HTML5的Canvas API来创建3D云动画效果。 首先，HTML5 Canvas是一个...
在这个“html5 canvas炫酷线条动画特效”中，我们看到的是利用Canvas API实现的一种动态视觉效果，即线条在键盘按下时会不断变化，形成一种能量传输或科幻动画的感觉。 首先，我们要理解Canvas的基本用法。HTML5 `...
在HTML5中，Canvas上不仅可以绘制图形和动画，还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效，其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款...
在这个“html5 canvas云粒子数字时钟动画特效”中，我们看到的是Canvas技术与时间显示、粒子系统相结合的应用实例。下面将详细阐述相关知识点。 1. HTML5 Canvas API： HTML5 Canvas是一个基于矢量图形的画布，...
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
HTML5 canvas是现代网页开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，提供了丰富的绘图功能，使得创建交互式和动画效果成为可能。在这个特定的案例中，“HTML5 canvas宇宙中星云动画背景特效”是一...
在这个“html5 canvas熊熊火焰动画特效”中，我们将深入探讨如何利用HTML5 Canvas API创建逼真的火焰动画效果。 首先，要实现这样的动画，我们需要了解Canvas的基本用法。Canvas是一个基于矢量图形的画布，通过...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，...通过阅读和分析这些文件，可以更深入地理解上述概念，并将它们应用到实际项目中，创造出令人惊叹的HTML5 Canvas粒子火焰动画特效。
这款“7款HTML5 Canvas全屏背景动画特效”集合了七种不同的Canvas动画，为网站提供引人入胜的全屏背景体验。这些特效能够提升网站的用户体验，增加互动性和吸引力，尤其适用于现代、时尚或者创意类的网站设计。 1. ...
在这个特定的案例中，“HTML5 Canvas透明丝带飘动背景动画特效”是一个利用Canvas API实现的优雅视觉效果，它通过流动的线条来模拟丝带在空中飘动的情景，为网站增添了一种动态且梦幻的氛围。 首先，让我们深入了解...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...