效果请看：

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. Java中Eclipse的使用

    Eclipse是跨平台的自由集成开发环境(IDE),初衷主要为Java语言的定制.第一次使用就喜欢上了它.它可以帮我们导入包,而不需要我们导入,有很多快捷键提供我们使用,方便节省时间:最值得我喜欢的是 ...

  2. HTTP学习二：Web应用中的HTTP

    1 HTTP连接 1.1 TCP连接对性能的影响 TCP三次握手如下图: 如上图,建立一次TCP连接要经过三个步骤.HTTP是建立在TCP之上的,因此TCP连接的性能直接影响HTTP的性能. TCP影 ...

  3. SSIS 数据源组件的External Metadata和Advanced Property

    1,SSIS的组件属性ValidateExternalMetadata 如果一个Destination组件使用的是上游创建的staging table,那么必须设置 ValidateExternalM ...

  4. 移动web app开发必备 - Deferred 源码分析

    姊妹篇  移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...

  5. alert()与console.log()的区别

    [1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. al ...

  6. Android仿微信拍摄短视频

    近期做项目需要添加上传短视频功能,功能设置为类似于微信,点击开始拍摄,设置最长拍摄时间,经过研究最终实现了这个功能,下面就和大家分享一下,希望对你有帮助. 1.视频录制自定义控件: /** * 视频播 ...

  7. android5.0联系人 sort_key改成phonebook_label

    项目中用到了联系人根据字母排序,在android4.0手机上是可以的,但是在android4.4以上的手机排序是乱的,一般字母排序都是根据sort_key这个拼音进行排序,而android5.0这个字 ...

  8. 开启了HA的XenServer如何关闭虚拟机？

    可开启了HA很方便,在主机自己坏掉的情况下其中的虚拟机能自己飘到活的机器上并被运行起来,不过如果手动的需要关闭虚拟机的话在这情况下,该虚拟机会自己"复活"即便我们选的是关机. 此时 ...

  9. 多种方法实现Loading（加载）动画效果

    当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次. 既能让用户知道正在提交中,也能防止二次提交,好处多多呢.

  10. 【Java心得总结四】Java泛型下——万恶的擦除

    一.万恶的擦除 我在自己总结的[Java心得总结三]Java泛型上——初识泛型这篇博文中提到了Java中对泛型擦除的问题,考虑下面代码: import java.util.*; public clas ...