[SoOnPerson] HTML5 Canvas 模擬時鐘
阿新 • • 發佈：2019-02-07
因為和朋友在討論一個關於時鐘的問題：
一天（24h）,時鐘的分針和時針可以重合多少次，他們一直在爭論22，23
然後我覺得蠻好玩的，就寫了一個看看，但是對於22，23，我也沒想數過
//螢幕的高度 var sc_height = screen.availHeight; //螢幕的寬度 var sc_width = screen.availWidth; //秒針角度 var jiaoduS = 0; //分針角度 var jiaoduM = 0; //一秒 var s = 1000 ; function draw() { //jq獲取元素 var cav = $("#background_block_web");//設定style裡的寬高 cav.css({"height": sc_height, "width": sc_width, "margin": 0}); //設定屬性寬高，這個不設定的話，圖案會很模糊 cav.attr("width",sc_width); cav.attr("height",sc_height); //原生獲取元素，通過jq獲取的好像不可以 var cv = document.getElementById("background_block_web"); //獲取上下文物件2d,具體我也不太懂 var context = cv.getContext('2d'); context.fillStyle = "white"; context.fillRect(0,0,sc_width,sc_height); drawMap(context); } function drawMap(context) { window.setInterval(function () { //清除 context.clearRect(0,0,sc_width,sc_height); //黑色的填充色，圓球的填充色 context.fillStyle = 'white'; //開始 context.beginPath(); //圓的邊的顏色 context.strokeStyle = 'black'; //圓的 x,y,大小，起始角度，結束角度360度，也就是一圈，因為pi是180度context.arc(300,300,300,0,2*Math.PI); //填充上面的黑色 context.fill(); //圓心為起點，畫一條直線（分針） context.moveTo(300,300); context.lineTo(300+150*Math.sin(jiaoduM),300-150*(Math.cos(jiaoduM))); //圓心為起點，畫一條直線（秒針） context.moveTo(300,300); context.lineTo(300+200*Math.sin(jiaoduS),300-200*(Math.cos(jiaoduS))); //角度增加 jiaoduS+=((6)*(Math.PI/180)); jiaoduM+=((0.1)*(Math.PI/180)); //畫 context.stroke(); },s); }
解釋一下表盤半徑300，圓心座標（300，300）；左上角的座標軸（0，0），分針是短的那個，長度是150，秒針是長的，長度200
秒針每秒轉過的角度是6度，原因是60秒轉過360度，所以一秒六度
分針每秒轉過的角度是0.1度，原因是3600秒轉360度，所以一秒0.1度
π 是180度，所以π/180 =1度
至於每個角度對應的線段的終點座標，畫一個座標軸算一下就好
知道角度還有斜邊
