HTML5 Canvas眨眼睛动画

效果请看：

http://keleyi.com/a/bjad/p9exlcwi.htm

请使用支持HTML5的浏览器查看效果。

以下是代码：


 3 <html>
 4 <body>
 5 <canvas width="300" height="300" id="keleyieye" style="background:black"></canvas>
 6 </body>
 7 </html>
 8 <script>
 9
10 var keleyieye = document.getElementById('keleyieye');
11 var graphics = keleyieye.getContext('2d');
12 var centerX = keleyieye.width/2;
13 var centerY = keleyieye.height/2;
14 //设置角度值，同时也就眼睛的横坐标长度
15 var angle = 300;
16 //因为眨眼采用的sin()函数组成，所以其自然有幅值这一个属性。
17 var amplitude = 30;
18 //创建一个用于保存幅值的变化的变量，采用amplitude的缩写ampl，便于认识 ^_^
19 var ampl = 20;
20 //灰眼球的半径
21 var blackBallSemi = 25;
22 var flag = true;
23
24 function paint() {
25 if (flag) {
26 ampl++;
27 if (ampl >= amplitude) {
28 flag = false;
29 }
30 }else {
31 ampl--;
32 if (ampl <= 0) {
33 flag = true;
34 }
35 }
36 //以centerX,centerY为中心，在眼睛所在的地方绘制一个白色的背景底色，
37 //长度为angle，宽为amplitude*2
38
39 graphics.fillStyle="white";
40
41 graphics.fillRect(centerX-angle/2, centerY-amplitude, angle, amplitude*2);
42
43 //以centerX,centerY为中心，绘制一个灰色的眼球
44 //半径为blackBallSemi*2
45 graphics.beginPath();
46 graphics.fillStyle="black";
47 graphics.arc(centerX, centerY, blackBallSemi,0,Math.PI*2,true);
48 graphics.fill();
49 graphics.beginPath();
50 //以centerX,centerY为中心，绘制一个白色的瞳孔
51 //半径为blackBallSemi/2
52 graphics.fillStyle="white";
53 graphics.arc(centerX,centerY, blackBallSemi/4,0,Math.PI*2,true);
54 graphics.fill();
55 graphics.strokeStyle="red";
56 for (var i = 0; i < angle; i++) {
57 graphics.moveTo(centerX-angle/2+i,centerY-30);
58 graphics.lineTo(centerX-angle/2+i, centerY-(Math.floor(Math.sin(Math.PI*i/angle)*ampl)));
59 graphics.moveTo(centerX-angle/2+i,centerY+30);
60 graphics.lineTo(centerX-angle/2+i,centerY+(Math.floor(Math.sin(Math.PI*i/angle)*ampl)));
61 graphics.stroke();
62 }
63
64
65 }
66 // paint();
67 setInterval(paint,30);
68 </script>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

HTML5 Canvas眨眼睛动画相关推荐

html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
html银河特效编码,html5 canvas银河星系动画特效
特效描述:html5 canvas 银河星系动画特效.html5 canvas绘制闪闪发光移动的银河星系背景动画特效.(上传服务器正常演示,本地无法直接预览) 代码结构 1. 引入JS 2. HTML ...
html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
html5 运动轨迹绘画,html5 canvas行星运动轨迹动画特效
特效描述:html5 canvas 行星运动轨迹动画特效.html5运动轨迹,行星动画特效代码结构 1. 引入JS 2. HTML代码 Your browser doesn't support c ...
HTML5 Canvas核心技术:图形.动画与游戏开发
<HTML5 Canvas核心技术:图形.动画与游戏开发> 基本信息原书名:Core HTML5 Canvas: Graphics, Animation, and Game Develo ...
html5给页面添加树叶特效,html5 canvas树叶光标动画特效
特效描述:html5 canvas树叶光标动画特效.html5 canvas虚幻的树叶光标动画. 代码结构 1. 引入JS 2. HTML代码 // Hold mouse down to enter ...
html5 水效果图,HTML5 canvas水波纹动画插件waterrippleeffect.js
插件描述:这是一款HTML5 canvas水波纹动画特效.该水波纹动画以插件的形式进行编写,可以是纯js插件,或通过jquery插件来进行调用.它能够制作出逼真的水波纹动画效果使用方法在页面中引入 ...
html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习课程介绍一.本课程几乎包括所有canvas常用的api用法讲解二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...
html5绘制草,html5 canvas海底水草动画
html5 canvas海底水草动画代码片段: Stem.prototype.draw = function(ctx) { var len, ctrlPoint, point; len = this ...

HTML5 Canvas眨眼睛动画

HTML5 Canvas眨眼睛动画相关推荐

最新文章

热门文章