canvas 鐘表

<!DOCTYPE html>
<meta charset="utf-8">
<html>
?  <body>
?  	? <canvas? width="500" height="500" id="clock" >? 
?  	? ? ? ?  您的瀏覽器不支持canvas
?  	? </canvas>
?  	? <script>
? ? ? ? ?  //獲取畫布
? ? ? ? ?  var clock=document.getElementById('clock');
? ? ? ? ?  //設(shè)置繪圖環(huán)境
? ? ? ? ?  var cxt=clock.getContext('2d');? 

? ? ?  function drawClock(){? ? 
? ? ?  	?  //清除畫布
? ? ?  	?  cxt.clearRect(0,0,500,500);
? ? ? ? ?  //獲取時(shí)間迁客，
? ? ? ? ? ? var now =new Date();
? ? ? ? ? ? var second =now.getSeconds();
? ? ? ? ? ? var minute =now.getMinutes();
? ? ? ? ? ? var hour1 =now.getHours();
? ? ? ? ? ? //將24小時(shí)進(jìn)制轉(zhuǎn)為12小時(shí)浓瞪，且為浮點(diǎn)型
? ? ? ? ? ? var hour=hour1+minute/60;
? ? ? ? ? ? hour=hour>12 ?hour-12:hour;
? ? ? ? ? ? //獲取全部時(shí)間
? ? ? ? ? ? var time=now.toLocaleString( );
? ? ? ? ? ? 
? ? ? ? ?  //表盤
? ? ? ? ? ? ? ? //開(kāi)始新路徑
? ? ? ? ? ? ? ? cxt.beginPath();
? ? ? ? ? ? ? ? cxt.lineWidth=8;
? ? ? ? ? ? ? ? cxt.strokeStyle="blue";
? ? ? ? ? ? ? ? //路徑函數(shù) x,y,r,角度范圍,順時(shí)針/逆時(shí)針
? ? ? ? ? ? ? ? cxt.arc(250,250,200,0,360,false);
? ? ? ? ? ? ? ? cxt.stroke(); 
? ? ? ? ? ? ? ? cxt.closePath();
? ? ? ? ? ? //刻度,利用旋轉(zhuǎn)
? ? ? ? ? ? ?  //時(shí)刻度
? ? ? ? ? ? ? ? for(var i=0;i<12;i++){
? ? ? ? ? ? ? ? 	//保存當(dāng)前狀態(tài)
? ? ? ? ? ? ? ? ? ? cxt.save();
? ? ? ? ? ? ? ? ? ? //刻度粗細(xì)
? ? ? ? ? ? ? ? ? ?  cxt.lineWidth=5;
? ? ? ? ? ? ? ? ? ? //刻度顏色
? ? ? ? ? ? ? ? ? ? cxt.strokeStyle="black"
? ? ? ? ? ? ? ? ? ? //設(shè)置00點(diǎn),以畫布中心為00
? ? ? ? ? ? ? ? ? ? cxt.translate(250,250);
? ? ? ? ? ? ? ? ? ? //設(shè)置旋轉(zhuǎn)角度 參數(shù)是弧度，角度 0--360 弧度角度*Math.PI/180
? ? ? ? ? ? ? ? ? ? cxt.rotate(i*30*Math.PI/180);
? ? ? ? ? ? ? ? ? ? cxt.beginPath();
? ? ? ? ? ? ? ? ? ? //刻度起始點(diǎn)
? ? ? ? ? ? ? ? ? ? cxt.moveTo(0,-180);
? ? ? ? ? ? ? ? ? ? //刻度結(jié)束點(diǎn)
? ? ? ? ? ? ? ? ? ? cxt.lineTo(0,-195);
? ? ? ? ? ? ? ? ? ? cxt.closePath();
? ? ? ? ? ? ? ? ? ? cxt.stroke();
? ? ? ? ? ? ? ? ? ? //將旋轉(zhuǎn)后的圖片返回原畫布
? ? ? ? ? ? ? ? ? ? cxt.restore();
? ? ? ? ? ? ? ? }

? ? ? ? ? ? ?  //分刻度
? ? ? ? ? ? ? ?  for(var i=0;i<60;i++){
? ? ? ? ? ? ? ? 	//保存當(dāng)前狀態(tài)
? ? ? ? ? ? ? ? ? ? cxt.save();
? ? ? ? ? ? ? ? ? ? //刻度粗細(xì)
? ? ? ? ? ? ? ? ? ? cxt.lineWidth=3;
? ? ? ? ? ? ? ? ? ? //刻度顏色
? ? ? ? ? ? ? ? ? ? cxt.strokeStyle="black"
? ? ? ? ? ? ? ? ? ? //設(shè)置00點(diǎn),以畫布中心為00
? ? ? ? ? ? ? ? ? ? cxt.translate(250,250);
? ? ? ? ? ? ? ? ? ? //設(shè)置旋轉(zhuǎn)角度 參數(shù)是弧度声怔，角度 0--360 弧度角度*Math.PI/180
? ? ? ? ? ? ? ? ? ? cxt.rotate(i*6*Math.PI/180);
? ? ? ? ? ? ? ? ? ? cxt.beginPath();
? ? ? ? ? ? ? ? ? ? //起始點(diǎn)
? ? ? ? ? ? ? ? ? ? cxt.moveTo(0,-188);
? ? ? ? ? ? ? ? ? ? cxt.lineTo(0,-195);
? ? ? ? ? ? ? ? ? ? cxt.closePath();
? ? ? ? ? ? ? ? ? ? cxt.stroke();
? ? ? ? ? ? ? ? ? ? //將旋轉(zhuǎn)后的圖片返回原畫布
? ? ? ? ? ? ? ? ? ? cxt.restore();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? //表盤中心
? ? ? ? ? ? ? ? cxt.beginPath();
? ? ? ? ? ? ? ? cxt.lineWidth=1;
? ? ? ? ? ? ? ? cxt.strokeStyle="red";
? ? ? ? ? ? ? ? cxt.fillStyle="red";
? ? ? ? ? ? ? ? //路徑函數(shù) x,y,r,角度范圍,順時(shí)針/逆時(shí)針
? ? ? ? ? ? ? ? cxt.arc(250,250,4,0,360,false);
? ? ? ? ? ? ? ? cxt.fill();
? ? ? ? ? ? ? ? cxt.stroke(); 
? ? ? ? ? ? ? ? cxt.closePath();
? ? ? ? ? ? //時(shí)針
? ? ? ? ? ? ? ? //保存當(dāng)前狀態(tài)
? ? ? ? ? ? ? ?  cxt.save();
? ? ? ? ? ? ? ?  cxt.lineWidth=5;
? ? ? ? ? ? ? ?  cxt.strokeStyle="black";
? ? ? ? ? ? ? ?  //設(shè)置異次元空間00點(diǎn)
? ? ? ? ? ? ? ?  cxt.translate(250,250);
? ? ? ? ? ? ? ?  //設(shè)置旋轉(zhuǎn)角度 參數(shù)是弧度锋叨，角度 0--360 弧度角度*Math.PI/180
? ? ? ? ? ? ? ?  cxt.rotate(hour*30*Math.PI/180);
? ? ? ? ? ? ? ?  cxt.beginPath();? ?  
? ? ? ? ? ? ? ?  cxt.moveTo(0,-120);
? ? ? ? ? ? ? ?  cxt.lineTo(0,10);
? ? ? ? ? ? ? ?  cxt.closePath();
? ? ? ? ? ? ? ?  cxt.stroke();
? ? ? ? ? ? ? ?  cxt.restore();
? ? ? ? ? ? //分針
? ? ? ? ? ? ? ?  cxt.save();
? ? ? ? ? ? ? ?  cxt.lineWidth="3";
? ? ? ? ? ? ? ?  cxt.strokeStyle="black";
? ? ? ? ? ? ? ?  cxt.translate(250,250);
? ? ? ? ? ? ? ?  cxt.rotate(minute*6*Math.PI/180);
? ? ? ? ? ? ? ?  cxt.beginPath();? ?  
? ? ? ? ? ? ? ?  cxt.moveTo(0,-150);
? ? ? ? ? ? ? ?  cxt.lineTo(0,15);
? ? ? ? ? ? ? ?  cxt.closePath();
? ? ? ? ? ? ? ?  cxt.stroke();
? ? ? ? ? ? ? ?  cxt.restore();
? ? ? ? ? ? //秒針
? ? ? ? ? ? ? ?  cxt.save();
? ? ? ? ? ? ? ?  cxt.lineWidth="1.5";
? ? ? ? ? ? ? ?  cxt.strokeStyle="red";
? ? ? ? ? ? ? ?  cxt.translate(250,250);
? ? ? ? ? ? ? ?  cxt.rotate(second*6*Math.PI/180);
? ? ? ? ? ? ? ?  cxt.beginPath();? ?  
? ? ? ? ? ? ? ?  cxt.moveTo(0,-160);
? ? ? ? ? ? ? ?  cxt.lineTo(0,20);
? ? ? ? ? ? ? ?  cxt.closePath();
? ? ? ? ? ? ? ?  cxt.stroke();
? ? ? ? ? ? ? ?  //秒針前端小點(diǎn)
? ? ? ? ? ? ? ?  cxt.beginPath();
? ? ? ? ? ? ? ?  //外環(huán)為紅色
? ? ? ? ? ? ? ?  cxt.strokeStyle="red";
? ? ? ? ? ? ? ?  //灰色填充
? ? ? ? ? ? ? ?  cxt.fillStyle="gray";
? ? ? ? ? ? ? ?  cxt.arc(0,-145,4,0,360,false);
? ? ? ? ? ? ? ? ?  cxt.fill();
? ? ? ? ? ? ? ?  cxt.closePath();
? ? ? ? ? ? ? ?  cxt.stroke();
? ? ? ? ? ? ? ?  cxt.restore();
? ? ? ? ? ? //表盤中心
? ? ? ? ? ? ? ? cxt.beginPath();
? ? ? ? ? ? ? ? cxt.lineWidth=1;
? ? ? ? ? ? ? ? //外環(huán)為紅色
? ? ? ? ? ? ? ? cxt.strokeStyle="red";
? ? ? ? ? ? ? ? //灰色填充
? ? ? ? ? ? ? ? cxt.fillStyle="gray";
? ? ? ? ? ? ? ? //路徑函數(shù) x,y,r,角度范圍,順時(shí)針/逆時(shí)針
? ? ? ? ? ? ? ? cxt.arc(250,250,4,0,360,false);
? ? ? ? ? ? ? ? cxt.fill();
? ? ? ? ? ? ? ? cxt.stroke(); 
? ? ? ? ? ? ? ? cxt.closePath();
? ? ? ? ? ? //寫時(shí)間? ? 
? ? ? ? ? ? ? ? cxt.font="15px 黑體 ";
? ? ? ? ? ? ? ?  cxt.fillStyle="black";
? ? ? ? ? ? ? ? //實(shí)心字
? ? ? ? ? ? ? ? cxt.fillText(time,160,150);
? ? ? ? ?  }? ? ? 
? ? ? ? ?  //使用setInterval(代碼凹蜈，毫秒時(shí)間)使時(shí)鐘轉(zhuǎn)起來(lái);
? ? ? ? ?  drawClock();
? ? ? ? ?  setInterval(drawClock,1000);


?  	? </script>
?  </body>
</html>

最后編輯于：2017.12.10 03:44:03

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末棱诱，一起剝皮案震驚了整個(gè)濱河市藻雪，隨后出現(xiàn)的幾起案子雕崩，更是在濱河造成了極大的恐慌魁索，老刑警劉巖，帶你破解...
沈念sama閱讀 218,451評(píng)論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件盼铁，死亡現(xiàn)場(chǎng)離奇詭異粗蔚，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)饶火，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,172評(píng)論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門鹏控，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人肤寝，你說(shuō)我怎么就攤上這事当辐。” “怎么了鲤看？”我有些...
開(kāi)封第一講書人閱讀 164,782評(píng)論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵缘揪，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我义桂，道長(zhǎng)找筝，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書人閱讀 58,709評(píng)論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任慷吊，我火速辦了婚禮袖裕，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘溉瓶。我一直安慰自己急鳄，他們只是感情好谤民，可當(dāng)我...
茶點(diǎn)故事閱讀 67,733評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著攒岛，像睡著了一般赖临。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上灾锯，一...
開(kāi)封第一講書人閱讀 51,578評(píng)論 1贊 305
城市分裂傳說(shuō)
那天兢榨，我揣著相機(jī)與錄音，去河邊找鬼顺饮。笑死吵聪，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的兼雄。我是一名探鬼主播吟逝，決...
沈念sama閱讀 40,320評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼赦肋！你這毒婦竟也來(lái)了块攒？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書人閱讀 39,241評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤佃乘，失蹤者是張志新（化名）和其女友劉穎囱井，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體趣避，經(jīng)...
沈念sama閱讀 45,686評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡庞呕，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,878評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了程帕。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片住练。...
茶點(diǎn)故事閱讀 39,992評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖愁拭，靈堂內(nèi)的尸體忽然破棺而出讲逛，到底是詐尸還是另有隱情，我是刑警寧澤岭埠，帶...
沈念sama閱讀 35,715評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布妆绞，位于F島的核電站，受9級(jí)特大地震影響枫攀，放射性物質(zhì)發(fā)生泄漏括饶。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,336評(píng)論 3贊 330
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一来涨、第九天我趴在偏房一處隱蔽的房頂上張望图焰。院中可真熱鬧，春花似錦蹦掐、人聲如沸技羔。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 31,912評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)藤滥。三九已至鳖粟，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間拙绊，已是汗流浹背向图。一陣腳步聲響...
開(kāi)封第一講書人閱讀 33,040評(píng)論 1贊 270
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留标沪，地道東北人榄攀。一個(gè)月前我還...
沈念sama閱讀 48,173評(píng)論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像金句，于是被迫代替她去往敵國(guó)和親檩赢。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,947評(píng)論 2贊 355

canvas 鐘表

推薦閱讀更多精彩內(nèi)容