效果请看：

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. mpi4py实践

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.概述 MPI(Message Passing Interface),消息传递接口,是一个标准化和轻便的能够运行在各种各样并行计算机上的消息传递 ...

  2. 深入理解javascript描述元素内容的5个属性

    × 目录 [1]innerHTML [2]outerHTML [3]innerText[4]outerText[5]textContent 前面的话 <p>This is a <i& ...

  3. Android实现对图片的缩放、剪切、旋转、存储

    转载:http://www.cnblogs.com/jerehedu/p/4464870.html 一.问题描述: 在开发中,当我们需要的有一张大图片同时还需要一些小图片时,我们只需要通过代码对此图片 ...

  4. 如何让ASP.NET Web API的Action方法在希望的Culture下执行

    在今天编辑推荐的<Hello Web API系列教程--Web API与国际化>一文中,作者通过自定义的HttpMessageHandler的方式根据请求的Accep-Language报头 ...

  5. ORM框架示例及查询测试,上首页修改版(11种框架)

    继上次ORM之殇,我们需要什么样的ORM框架? 整理了11个ORM框架测试示例,通过示例代码和结果,能很容易了解各种框架的特性,优缺点,排名不分先后 EF PDF XCODE CRL NHiberna ...

  6. 开发中常用js记录（二）

    (1)获得asp.net控件的value值 document.getElementById('<%=SUKid.ClientID %>').value (2)获得选中值 $('#selec ...

  7. Angularjs CURD

    前言 基于一个手机端的项目使用了angularjs,硬着头皮去用,有很多的疑问还需要一一去验证,刚开始总是感觉找不到北,总是感觉有很多概念,而且似乎ng既夹杂MVC又夹杂MVVM的思想, 忙里偷闲敲了 ...

  8. VC++6.0文件关联问题的解决方法

    最近我的电脑*.c文件关联失败,无法实现双击*.c打开vc++6.0,感觉特别不爽. 在经过自己的琢磨研究后,终于找到了解决方法. 特此分享下,希望可以帮到遇到同样问题的你. 核心内容: 1.& ...

  9. .net提交HTML元素到后台，遇到Request报错 解决方案

    对于.NET MVC 项目来说,在Controller中对应的Action方法上打上标签: [ValidateInput(false)] 在MSDN上:HttpRequest 类使用输入验证标志来跟踪 ...

  10. TCP的定时器

    TCP的定时器 在TCP协议中有的时候需要定期或者按照某个算法对某个事件进行触发,那么这个时候,TCP协议是使用定时器进行实现的.在TCP中,会有四种定时器: 重传定时器 坚持定时器 保活定时器 2M ...