效果請看：
請使用支援html5的瀏覽器檢視效果。
以下是**：
3
<
html
>
4<
body
>
5<
canvas
width
="300"
height
="300"
id="keleyieye"
style
="background:black"
>
canvas
>
6body
>
7html
>
8<
script
>910
varkeleyieye
=document.getelementbyid(
'keleyieye');
11var
graphics
=keleyieye.getcontext('2d
');12var
centerx
=keleyieye.width/2;
13var
centery
=keleyieye.height/2;
14//
設定角度值，同時也就眼睛的橫座標長度
15var
angle
=300;16
//因為眨眼採用的sin()函式組成，所以其自然有幅值這乙個屬性。
17var
amplitude =30
;18//建立乙個用於儲存幅值的變化的變數，採用amplitude的縮寫ampl，便於認識 ^_^
19var
ampl =20
;20//灰眼球的半徑
21var
blackballsemi =25
;22varflag
=true;23
24function
paint() 30}
else35}
36//
以centerx,centery為中心，在眼睛所在的地方繪製乙個白色的背景底色，
37//
長度為angle，寬為amplitude*2
3839
graphics.fillstyle="
white";
4041
graphics.fillrect(centerx
-angle
/2, centery-amplitude, angle, amplitude*2);
4243
//以centerx,centery為中心，繪製乙個灰色的眼球
44//
半徑為blackballsemi*2
45graphics.beginpath();
46graphics.fillstyle="
black";
47graphics.arc(centerx, centery, blackballsemi,
0,math.pi*2
,true
);48
graphics.fill();
49graphics.beginpath();
50//
以centerx,centery為中心，繪製乙個白色的瞳孔
51//
半徑為blackballsemi/2
52graphics.fillstyle="
white";
53graphics.arc(centerx,centery, blackballsemi
/4,0,math.pi*2,true);
54graphics.fill();
55graphics.strokestyle="
red";56
for(
vari =0
; i
<
angle; i
++)
636465}
66//
paint();
67setinterval(paint,
30);
68script
>
web前端：
HTML5 canvas 繪製圓形
canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...
HTML5 canvas擦除無效
部分安卓手機上會出現canvas內圖表重疊，並且清除無效，屬於偶現缺陷，非常難以確定其產生原因，比如下圖這個樣子，第一次繪製的圖形沒有擦除，導致第二次繪製時出現重影 初步考慮為裝置自身問題，引起canvasapi的context.clearrect執行無效。在經過一些嘗試之後，發現在每次擦除 cle...
HTML5canvas時鐘例項
直接放 不太好，還是簡單說說運用到的canvas知識 1 canvas 元素用於在網頁上繪製圖形。id c width 1000 height 400 canvas 2 canvas2d環境下繪製 var ogc oc.getcontext 2d 3 我要開始繪製路徑啦 ogc.begin path...