js+html5實現canvas繪制網頁時鐘的方法_

1、js+html5實現canvas繪制網頁時鐘的方法_ 這篇文章主要介紹了js+html5實現canvas繪制網頁時鐘的方法,涉及html5圖形繪制的基礎技巧,感愛好的伴侶可以參考一下 本文實例講解并描述了js+html5實現canvas繪制網頁時鐘的方法，畫的是一個可用于網頁的、帶擺的鐘表，可以通過按鈕調整其大小和位置，具體實現內容如下 html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleClock/title script type=text/javascript var xClock=

2、300; /表心位置 var yClock=250; /表心位置 var d=180.0;/鐘表圓面的半徑 var value = -d*1.07; function enlarge() d+; function reduce() d-; function westwards() var c=document.getElementById(myCanvas); var g2d=c.getContext(2d); g2d.translate(-1,0); /置坐標軸原點于表心 c=document.getElementById(myPendulum); g2d=c.getContext(2d);

3、 g2d.translate(-1,0); /置坐標軸原點于表心 function eastwards() var c=document.getElementById(myCanvas); var g2d=c.getContext(2d); g2d.translate(1,0); /置坐標軸原點于表心 c=document.getElementById(myPendulum); g2d=c.getContext(2d); g2d.translate(1,0); /置坐標軸原點于表心 function upwards() var c=document.getElementById(myCanva

4、s); var g2d=c.getContext(2d); g2d.translate(0,-1); /置坐標軸原點于表心 c=document.getElementById(myPendulum); g2d=c.getContext(2d); g2d.translate(0,-1); /置坐標軸原點于表心 function downwards() var c=document.getElementById(myCanvas); var g2d=c.getContext(2d); g2d.translate(0,1); /置坐標軸原點于表心 c=document.getElementById(

5、myPendulum); g2d=c.getContext(2d); g2d.translate(0,1); /置坐標軸原點于表心 function fillPolygon( a, b, fillColor, ctx) ctx.beginPath(); ctx.moveTo(a0,b0); for (var j=1;ja.length;j+) ctx.lineTo(aj,bj); ctx.closePath(); ctx.fillStyle=fillColor; ctx.fill(); function randomColor() var s =#; for (var i=0;i3;i+) s

6、 += Math.floor(Math.random()*16).toString(16); return s; function locateCoordinate() var c=document.getElementById(myCanvas); var g2d=c.getContext(2d); g2d.translate(xClock,yClock); /置坐標軸原點于表心 var c=document.getElementById(myPendulum); var g2d=c.getContext(2d); g2d.translate(xClock,yClock); /置坐標軸原點于

7、表心 function drawFace() /定義畫鐘表表面drawFace方法 /* 表示1,2,4,5,7,8,10,11點鐘位置的較小尺寸的菱形標記頂點坐標數組 */ var x = new Array(0, Math.round(d/30), 0, Math.round(-d/30); var y = new Array( Math.round(-d*1.07),-d,Math.round(-d*0.9),-d); /* 表示3,6,9,12點鐘位置的較大尺寸的菱形標記頂點坐標數組 */ var x1= new Array(0,Math.round(d/15),0,Math.roun

8、d(-d/15); var y1 =new Array(Math.round(-d*1.13),-d,Math.round(-d*0.9),-d); var c=document.getElementById(myCanvas); var g2d=c.getContext(2d); /下面開頭 預備畫鐘表圓面邊 g2d.beginPath(); g2d.arc(0,0,d, 0 , 2*Math.PI); g2d.strokeStyle=lightGray; g2d.lineWidth=d/18; g2d.stroke(); /最終一筆，畫鐘表圓面邊 /下面開頭預備畫表示 每個鐘點 的菱形 f

9、or (var i=0;i12;i+) /for 循環(huán)語句的循環(huán)體開頭 if (i%3=0) /畫較大尺寸的紅色菱形，表示3,6,9,12點 fillPolygon( x1, y1, red, g2d); else /畫較小尺寸的桔黃色菱形，表示其余的鐘點 fillPolygon(x,y,orange,g2d); /以鐘表表心為原點,坐標系順時針轉動30度,以便畫下一個鐘點位置的菱形標記 g2d.rotate(Math.PI/6.0); /for 循環(huán)語句的循環(huán)體結束 /畫鐘表表面 drawFace 方法結束 /* 定義畫鐘表的時針、分針、和秒針的方法 drawNeedles * 形參 Hra

10、dian，單位弧度， 為時針從0點算起的弧度位置， * 形參 Mradian，單位弧度， 為分針從0分算起的弧度位置， * 形參 Sradian，單位弧度， 為秒針從0秒算起的弧度位置。*/ function drawNeedles( Hradian, Mradian, Sradian ) var c=document.getElementById(myCanvas); var g2d=c.getContext(2d); /以鐘表表心為原點,坐標系順時針轉動Hradian弧度,以便畫出時針 g2d.rotate(Hradian); /表示時針的多邊形頂點的坐標數組 var Hx =new Ar

11、ray(0, Math.round(d/19),0, Math.round(-d/19) ); var Hy =new Array( Math.round(-d/2), Math.round(-d/3), 0, Math.round(-d/3) ); fillPolygon(Hx,Hy,magenta,g2d);/時針設為紫紅色, /以鐘表表心為原點,坐標系逆時針轉動Hradian弧度,以還原坐標系 g2d.rotate(-Hradian); /以鐘表表心為原點,坐標系順時針轉動Mradian弧度,以便畫出分針 g2d.rotate(Mradian); /表示分針的多邊形頂點的坐標數組 var

12、 Mx=new Array(Math.round(-d/19),0,Math.round(d/19); var My=new Array(0,Math.round(-d/1.3),0); fillPolygon(Mx,My,gray,g2d); /分針設為灰色 /以鐘表表心為原點,坐標系逆時針轉動Mradian弧度,以還原坐標系 g2d.rotate(-Mradian); /以鐘表表心為原點,坐標系順時針轉動Sradian弧度,以便畫出秒針 g2d.rotate(Sradian); / 秒針設為隨機顏色 g2d.strokeStyle=green; g2d.lineWidth=1; g2d.m

13、oveTo(0,0); g2d.lineTo(0,Math.round(-d/1.1); g2d.stroke(); g2d.beginPath(); g2d.arc(0,Math.round(-d),d/18, 0 , 2*Math.PI); g2d.fillStyle=randomColor(); g2d.fill(); /最終一筆，畫秒針頂點的小球 /以鐘表表心為原點,坐標系逆時針轉動Sradian弧度,以還原坐標系 g2d.rotate(-Sradian); /畫表針方法 drawNeedles的代碼塊結束 /* 畫出字符串來表示瞬時時間 */ function DrawTime()

14、var time=new Date(); /獵取當前時間。 var hour=time.getHours(); /獵取小時 var minute=time.getMinutes();/獵取分鐘 var second=time.getSeconds();/獵取秒數 var apm=AM; /默認顯示上午：AM. var canvas =document.getElementById(myCanvas); var g2d =canvas.getContext(2d); if(hour12) /根據12小時制止顯示 hour=hour-12; apm=PM; if(minute10) /假如分鐘只有

15、1位，補0顯示 minute=0+minute; if(second10) /假如秒數只有1位，補0顯示 second=0+second; g2d.clearRect(-xClock,-yClock,600,600); /清屏 var s = hour+:+minute+:+second+:+apm; g2d.fillStyle=red; g2d.font = d/4+ px KAITI; g2d.fillText(s,-d/1.8, d*1.4); g2d.font= d/4 + px 楷體; / Create gradient var gradient=g2d.createLinearGr

16、adient(0,0,canvas.width,0); gradient.addColorStop(0,magenta); gradient.addColorStop(0.5,blue); gradient.addColorStop(1.0,red); / Fill with gradient g2d.fillStyle=gradient; g2d.fillText(大數據,-d/2.6,d/2); /獲得實例創(chuàng)建瞬間的秒讀數,由此計算出秒針,相對于0 秒,走過的弧讀數 var c = Math.PI/30 * second; /獲得創(chuàng)建瞬間的的分鐘讀數,由此計算出分針,相對于0 分,走過的弧

17、讀數 var b = Math.PI/30 * minute; /* 獲得創(chuàng)建瞬間的的鐘點讀數,由此計算出時針,相對于0 點,走過的弧讀數。 * 時針走過的弧度為整點的度數(每小時走30度),加上走過分鐘數的修正值 */ var a = Math.PI/180*(30 * hour + minute/2); /* 坐標系平移 (xClock,yClock) ，使得坐標軸成為表盤中心 */ drawFace(); drawNeedles( a, b, c); / 方法 DrawTime 的代碼塊結束 var i=0; function pendulum() /pendulum_bob var i

18、nstantAngle = new Array(64,61,56,49,40,29,16,3,-8, -16,-29,-40,-49,-56,-61,-64,-64,-64,-61,-56,-49,-40,-29, -16,-8,3,16,29,40,49,56,61,64,64); /擺的即時角度數組 var c=document.getElementById(myPendulum); var ctx=c.getContext(2d); var alpha=instantAnglei+%instantAngle.length*Math.PI/180; ctx.clearRect(-300,-

19、300,900,900); ctx.rotate(alpha); / 秒針設為隨機顏色 ctx.fillStyle=brown; ctx.fillRect(-3,0,6,d*1.4); ctx.shadowBlur=20; ctx.shadowColor=black; ctx.fillStyle=blue; /ctx.fillRect(-d/3.5, d*1.35, d/1.6, d/4.4); ctx.font=40px 楷體; / Create gradient var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.a

20、ddColorStop(0,magenta); gradient.addColorStop(0.5,blue); gradient.addColorStop(1.0,white); / Fill with gradient /ctx.fillStyle=gradient; ctx.fillStyle=red; ctx.fillText(大數據,-d/3.2,d*1.55); ctx.shadowBlur=0; ctx.shadowColor=null; ctx.fillStyle=null; ctx.rotate(-alpha); function preparation() locateCo

21、ordinate() setInterval(DrawTime(),500); setInterval(pendulum(),200); /script style #myCanvas z-index:3; position:absolute; left:0px; top:0px; #myPendulum z-index:2; position:absolute; left:0px; top:0px; #controlPanel position:absolute; left:600px; top:0px; width:100px; text-align:center; font-family:楷體; font-size:20px; font-weight:bold; color: