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

2019-11-20 09:58:25

字體：大中小

來源：轉載

供稿：網友

本文實例講述了js+html5實現canvas繪制網頁時鐘的方法，畫的是一個可用于網頁的、帶擺的鐘表，可以通過按鈕調整其大小和位置，具體實現內容如下

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Clock</title><script type="text/javascript"> var xClock=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"); 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("myCanvas");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("myPendulum"); g2d=c.getContext("2d"); g2d.translate(0,1); //置坐標軸原點于表心}  function fillPolygon( a, b, fillColor, ctx){ctx.beginPath();ctx.moveTo(a[0],b[0]);for (var j=1;j<a.length;j++)ctx.lineTo(a[j],b[j]);ctx.closePath();ctx.fillStyle=fillColor;ctx.fill();} function randomColor(){ var s ="#";for (var i=0;i<3;i++)s += 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); //置坐標軸原點于表心} 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.round(-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(); //最后一筆，畫鐘表圓面邊  //下面開始準備畫表示 每個鐘點 的菱形 for (var i=0;i<12;i++)  { //for 循環語句的循環體開始 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 循環語句的循環體結束}//畫鐘表表面 drawFace 方法結束 /* 定義畫鐘表的時針、分針、和秒針的方法 drawNeedles* 形參 Hradian，單位弧度， 為時針從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 Array(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 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.moveTo(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() { 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(hour>12){ //按照12小時制止顯示 hour=hour-12; apm="PM"; } if(minute<10){ //如果分鐘只有1位，補0顯示 minute="0"+minute; } if(second<10){ //如果秒數只有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 gradientvar gradient=g2d.createLinearGradient(0,0,canvas.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// Fill with gradientg2d.fillStyle=gradient;g2d.fillText("大數據",-d/2.6,d/2);//獲得實例創建瞬間的秒讀數,由此計算出秒針,相對于0 秒,走過的弧讀數var c = Math.PI/30 * second; //獲得創建瞬間的的分鐘讀數,由此計算出分針,相對于0 分,走過的弧讀數var b = Math.PI/30 * minute;/* 獲得創建瞬間的的鐘點讀數,由此計算出時針,相對于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_bobvar instantAngle = 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=instantAngle[i++%instantAngle.length]*Math.PI/180;ctx.clearRect(-300,-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 gradientvar gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("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(){ locateCoordinate() 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:#6C0;}</style></head><body onLoad="preparation()"><canvas id="myCanvas" width="600" height="600" >   <p>Your browserdoes not support the canvas element!</p> </canvas><canvas id="myPendulum" width="600" height="600" >   <p>Your browserdoes not support the canvas element!</p> </canvas><div id="controlPanel"><table><tr><td>控制</td><td>按鈕</td></tr><tr><td><input value="增大" type="button" onclick="enlarge()"></button></td><td><input value="縮小" type="button" onclick="reduce()"></button></td></tr> <tr><td><input value="左移" type="button" onclick="westwards()"></button></td><td><input value="右移" type="button" onclick="eastwards()"></button></td></tr> <tr><td><input value="上移" type="button" onclick="upwards()"></button></td><td><input value="下移" type="button" onclick="downwards()"></button></td></tr></table> </div></body></html>

效果圖：