效果请看：

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. Nginx服务器之基础学习

    一.Nginx介绍 nginx:Nginx是一种软件服务器(轻量级),故它最主要的功能就是可以与服务器硬件结合,我们的应用程序可以放在nginx服务器上进行发布,已达到让网民浏览的效果.除此自外,Ng ...

  2. WPF入门教程系列十六——WPF中的数据绑定(二)

    三.绑定模式 通过上一文章中的示例,学习了简单的绑定方式.在这里的示例,要学习一下绑定的模式,和模式的使用效果. 首先,我们来做一个简单示例,这个示例是根据ListBox中的选中项,去改变TextBl ...

  3. 日志log

    public class LoggerHelper { private static Queue<string> qMsg = null; private static string lo ...

  4. MongoDB 数据分发

    在MongoDB(版本 3.2.9)中,数据的分发是指将collection的数据拆分成块(chunk),分布到不同的分片(shard)上,数据分发主要有2种方式:基于数据块(chunk)数量的均衡分 ...

  5. 谈谈基于OAuth 2.0的第三方认证 [中篇]

    虽然我们在<上篇>分别讨论了4种预定义的Authorization Grant类型以及它们各自的适用场景的获取Access Token的方式,我想很多之前没有接触过OAuth 2.0的读者 ...

  6. 从零开始编写自己的C#框架（3）——开发规范

    由于是业余时间编写,而且为了保证质量,对写出来的东西也会反复斟酌,所以每周只能更新两章左右,请大家谅解,也请大家耐心等待,谢谢大家的支持. 初学者应该怎样学习本系列内容呢?根据我自己的学习经验,一般直 ...

  7. 使用CSS3 Media Queries实现网页自适应

    原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...

  8. EasyUI DataGrid 修改每页显示数量的最大值&&导出Grid到Excel

    首先,最近在搞那个DataGrid的导出,发现,网上的用JS导出到本地的方法虽然可用,但是只能导出DataGrid当前的数据,例如说,DataGrid默认是最大显示50行,但是如果有多页,那么就无法显 ...

  9. CocoaPods 安装 使用

    1.开启 terminal 2.移除现有 Ruby 默认源 $ gem sources --remove https://rubygems.org/ 3.使用新的源 $ gem sources -a ...

  10. 对来自于Azure的远程连接文件（.rdp）的另一种更便捷的自定义方法

    在上一篇日志中(很抱歉那张比较黑的截图)介绍了如何获得Azure中的Windows虚拟机的远程连接文件,以及一种基于文本编辑方式进行自定义的方法. 实际上对于在Windows下的用户来说,我们可以使用 ...