HTML5 Canvas眨眼睛動畫

阿新 • • 發佈：2019-01-18

效果請看：

請使用支援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>

HTML5 Canvas眨眼睛動畫

效果請看：請使用支援HTML5的瀏覽器檢視效果。以下是程式碼： 3 <html> 4 <body> 5 <canvas width="300" height="300" id="keleyieye" style="background:b

HTML5 Canvas水波紋動畫特效

實用 containe tex settings dex apple IV vertical 動畫 HTML5的Canvas特性非常實用，我們不僅可以在Canvas畫布上繪制各種圖形，也可以制作絢麗的動畫，比如這次介紹的水波紋動畫特效。以前我們也分享過一款基於HTML5 W

HTML5 Canvas 逐幀動畫的實現

和C++遊戲開發相同，HTML5逐幀動畫需要的影象元素也是一張繪製了每一幀影象效果的圖片。通過迴圈繪製各幀的影象來實現動畫的效果。本示例中演示的是一個小人，預設狀態下，小人朝右方站立；按下左/右方向鍵的時候，小人朝左/右方奔跑（在畫布中沒有位移）；鬆開按鍵後保持奔跑的

簡單HTML5 Canvas Arrow旋轉動畫

效果圖：[img]http://dl2.iteye.com/upload/attachment/0108/8083/a578e2c3-c0e3-39ca-a192-dc7c0793c6e0.gif[/img]效果連結：[url]http://www.108js.com/art

[js高手之路]html5 canvas動畫教程 - 自己動手做一個類似windows的畫圖軟件

箭頭 erb 寬度 pow(x type row center shape htm 這個繪圖工具，我還沒有做完，不過已經實現了總架構，以及常見的簡易圖形繪制功能： 1，可以繪制直線，圓，矩形，正多邊形【已完成】 2，填充顏色和描邊顏色的選擇【已完成】 3，描邊和填充功

html5 canvas動畫教程 - 自己動手做一個類似windows的畫圖軟件

.cn pic 箭頭 uid .com 教程 amp 設置一個制直線，圓，矩形，正多邊形【已完成】 2，填充顏色和描邊顏色的選擇【已完成】 3，描邊和填充功能的選擇【已完成】後續版本：橡皮擦，坐標系，線形設置，箭頭，其他流程圖形，裁剪與調整圖形。。。。。終極目標：

Html5 Canvas動畫基礎（碰撞檢測）

在Canvas中進行碰撞檢測，大家往往直接採用遊戲引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)內建的碰撞檢測功能，好奇的你有思考過它們的內部執行機制嗎？下面將針對基本的碰撞檢測技術進行講解： 1、基於矩形的碰撞檢測所謂碰撞檢測就是判斷物體間是否發生重疊，這裡我們假設討論的碰撞體都是矩

Html5 Canvas動畫基礎碰撞檢測的實現

HTML5 canvas帶漸變色的圓形進度條動畫

query-circle-progress是一款帶漸變色的圓形進度條動畫特效jQuery外掛。該圓形進度條使用的是HTML5 canvas來繪製圓形進度條及其動畫效果，進度條使用漸變色來填充，效果非常的酷。

心中的利劍：HTML5 Canvas遊戲動畫（JavaScript）

　某股盤子八千萬,掛單一般以幾手和幾十手居多。某日掛單正常,第一買賣價位在13.30元和13.31元。這時突然出現一筆開價13.35元的900手大買單,在合計成交200餘手後還有600餘手大接單掛在13.35元上面,而第

基於 HTML5 Canvas 實現的文字動畫特效

前言文字是網頁中最基本的元素，一般我們在網頁上都是展示的靜態文字，但是就效果來說，還是比較枯燥的。文字淡入淡出的動畫效果在專案中非常實用，如果有某些關鍵的文字，可以通過這種動態的效果來提醒使用者閱讀。動態效果圖這個 Demo 是不斷重複地設定文字的大小和透明度，這些英文字母也

分享8款令人驚歎的HTML5 Canvas動畫特效

HTML5的確可以製作出非常絢麗的網頁動畫效果，尤其是利用HTML5 Canvas特性和HTML5 3D特性，我們更加可以欣賞到超酷的動畫特效。今天我從html5tricks網站上整理了8款令人驚歎的HTML5 Canvas動畫教程，大家可以一起來看看。1、3D

利用HTML5的canvas製作萬花筒動畫特效

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 #canvas{ 6

html5 canvas文字標籤雲3D旋轉動畫特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

HTML5 canvas 製作動畫原理

使用HTML5畫布能夠幫助我們快速實現簡單的動畫效果，基本原理如下：每隔一定時間繪製圖形並且清除圖形，用來模擬出一個動畫過程，可以使用context.clearRect(0, 0, x, y)方法來重新整理需要繪製的圖形以下為簡單的繞某一中心點進行旋轉的動畫

16個非常有趣的HTML5 Canvas動畫特效集合

HTML5技術正在不斷的發展和更新，越來越多的開發者也正在加入HTML5陣營，甚至在移動開發上HTML5的地位也是越來越重要了。HTML5中的大部分動畫都是通過Canvas實現，因為Canvas就像一塊畫布，我們可以通過呼叫指令碼在Canvas上繪製任意形狀，甚至是製作動畫。本文就是收集了很多非常富有創意的一

HTML5 Canvas 獲取網頁的像素值。

off 說過漸變 color 相加 end get 代碼 mod 我之前在網上看過一個插件叫做出JScolor 顏色拾取器說白了就是通過1*1PX的DOM設置顏色值通過JS來獲取當前鼠標點擊位置DOM的顏色值。自從HTML5 畫布出來之後。就有更好的方法來獲

html5 canvas 繪制五角星

create 瀏覽器 function con 圖像 sep fun context lin html5 中的 canvas 元素使用 javascript 在網頁上繪制圖像，今天就寫一下如何使用 canvas 繪制一個五角星。代碼如下：　　html 代碼 <c

HTML5 Canvas絢麗的小球詳解

.com demo ack doc scrip 情況技術顏色 htm 實例說明：實例使用HTML5+CSS+JavaScript實現小球的運動效果掌握Canvas的基本用法技術要點：從需求出發分析Demo要實現的功能擅於使用HTML5 Canvas 參

HTML5 | Canvas中變量作用域與setInterval()方法的影響

通過 value utf 出現 close span arc shadow cli Demo - 隨機繪制圓環實現思路：將一個圓環的繪制分成100份，setInterval()方法定義每隔時間n繪制一段新的，每份的開始路徑都是上一次的結束路徑，實現步進繪制。通

HTML5 Canvas眨眼睛動畫

相關推薦