效果请看：

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前端：http://www.cnblogs.com/jihua/p/webfront.html

HTML5 Canvas眨眼睛动画的更多相关文章

  1. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  2. HTML5 Canvas画图与动画学习59例

    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例

  3. HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

  4. HTML5 Canvas绘文本动画（使用CSS自定义字体）

    一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...

  5. 八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

    HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only a ...

  6. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  7. Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识

    基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...

  8. 学习HTML5, Canvas及简单动画的使用

    通过在CSDN中的一些简单课程学习,跟随老师联系,做了如下的月亮,太阳和地球的运动效果.纪录在文章中,用于下次使用. 准备工作如下: 1. 使用三张背景图片 太阳 月亮 地球 2. 在HTML页面中定 ...

  9. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

随机推荐

  1. C#设计模式-享元模式

    在软件开发过程,如果我们需要重复使用某个对象的时候,如果我们重复地使用new创建这个对象的话,这样我们在内存就需要多次地去申请内存空间了,这样可能会出现内存使用越来越多的情况,这样的问题是非常严重,然 ...

  2. Sql Server系列：存储过程

    1 存储过程简介 存储过程是使用T-SQL代码编写的代码段.在存储过程中,可以声明变量.执行条件判断语句等其他编程功能.在MS SQL Server 2012中存储过程主要分三类:系统存储过程.自定义 ...

  3. python调取C/C++的dll生成方法

    本文针对Windows平台下,python调取C/C++的dll文件. 1.如果使用C语言,代码如下,文件名为test.c. __declspec(dllexport) int sum(int a,i ...

  4. 关于javascript中限定时间内防止按钮重复点击的思路

    前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比 ...

  5. IDDD 实现领域驱动设计－一个简单业务用例的回顾和理解

    上一篇:<IDDD 实现领域驱动设计-由贫血导致的失忆症> 这篇博文是对<实现领域驱动设计>第一章后半部分内容的理解. Domain Experts-领域专家 这节点内容是昨天 ...

  6. 跟我学PHP第二篇- 配置Mysql以及PHP WampServer篇（1）

    大家好,昨天我给大家介绍了如何去安装ZEND STUDIO,下面昨天文章的链接: http://www.cnblogs.com/kmsfan/p/zendStudio.html 本节为配置的第一部分, ...

  7. SQL Server 通过重建方式还原 master 数据库

    1,备份master数据库 2,停止服务,直接删除master数据文件 3,用安装程序重建master数据文件 控制台下进入安装目录就不说了 D:\SetUp\sqlserver2012>Set ...

  8. OpenCV2:图像的几何变换,平移、镜像、缩放、旋转(2)

    在OpenCV2:图像的几何变换,平移.镜像.缩放.旋转(1)主要介绍了图像变换中的向前映射.向后映射.处理变换过程中浮点坐标像素值的插值算法,并且基于OpenCV2实现了两个简单的几何变换:平移和镜 ...

  9. Linux上的SQL Server的起步

    我们知道,几个星期前,微软发布了在Linux上直接运行的SQL Server第一个公开CTP版本!因此,对我来说,是时候跨界在Linux上安装我的第一个SQL安装,这样的话,我就可以在Linux上折腾 ...

  10. 代码片段添加智能提示，打造一款人见人爱的ORM框架

    SqlSugar ORM优点: 1.高性能,达到原生最高水准,比SqlHelper性能要高,比Dapper快30% 比EF快50% 2.支持多种数据库 ,sql版本更新最快,其它会定期更新,可以在多种 ...