當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

用canvas画钟，实时变化的钟

發(fā)布時間：2024/3/12 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了用canvas画钟，实时变化的钟小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

先上代碼，詳解之后補上

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>canvas{position: absolute;border: 1px solid black;left: 200px;}</style> </head> <body><canvas width="1500" height="800"></canvas><script>var canvas=document.querySelector("canvas");var content=canvas.getContext("2d");//封裝表盤function drowClock(){//畫表盤content.beginPath();content.lineWidth=10content.arc(750,300,200,0,2*Math.PI)content.closePath();content.stroke();//畫時刻度for(i=0;i<12;i++){content.save();content.translate(750,300);content.rotate(i*Math.PI/6);content.beginPath();content.lineWidth=3;content.moveTo(0,-170);content.lineTo(0,-195);content.stroke();content.closePath();content.restore();}//畫分刻度for(i=0;i<60;i++){content.save();content.translate(750,300);content.rotate(i*Math.PI/180*(360/60));content.beginPath();content.lineWidth=1;content.moveTo(0,-180);content.lineTo(0,-195)content.stroke();content.closePath();content.restore();}//畫數(shù)字for(i=0;i<12;i++){var num=[3,4,5,6,7,8,9,10,11,12,1,2]var tx=150*Math.cos(i*Math.PI/180*30);var ty=150*Math.sin(i*Math.PI/180*30);content.save();content.translate(750,300);content.beginPath();content.textAlign="center";content.textBaseline="middle"content.font="20px 微軟雅黑" content.fillText(num[i],tx,ty);content.stroke();content.closePath();content.restore();}}//封裝秒針，分針，時針function drowNeedle(){var time= new Date();var s=time.getSeconds();var m=time.getMinutes();var h=time.getHours();if(h>12){h=h-12;}//秒針content.save();content.translate(750,300);//因為6點鐘方向為畫圖的起始點，所以要減180度，讓起始點變?yōu)?2點鐘方向content.rotate(Math.PI/180*6*s-Math.PI)content.beginPath();content.lineWidth=2;content.strokeStyle="red"content.moveTo(0,0);content.lineTo(0,120);content.stroke();content.closePath();content.restore();//分針content.save();content.translate(750,300);content.rotate(m*(Math.PI/180)*6-Math.PI);content.beginPath();content.lineWidth=2;content.strokeStyle="black"content.moveTo(0,0);content.lineTo(0,80);content.stroke();content.closePath();content.restore();//時針content.save();content.translate(750,300);content.rotate(h*Math.PI/180*(360/12)-Math.PI+Math.PI/180*m/2)content.beginPath();content.lineWidth=2;content.strokeStyle="black"content.moveTo(0,0);content.lineTo(0,60);content.stroke();content.closePath();content.restore();console.log(h)}drowClock();drowNeedle();//設置定時器讓表動起來setInterval(function(){content.clearRect(0,0,1500,800);drowClock();drowNeedle();},1000)</script> </body> </html>

效果圖如下：

總結

以上是生活随笔為你收集整理的用canvas画钟，实时变化的钟的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。