canvas 點鐘 · 開發者必備的知識

~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas> <script> /*第一部分 - 創建畫布*/ // 通過canvas元素創建一個canvas對象(var canvas): let canvas = document.getElementById("canvas"); //為canvas對象創建一個2D繪圖對象(var context)： let context = canvas.getContext("2d"); //使用畫布的高度計算時鐘半徑： let radius = canvas.height / 2; //將（0,0）位置（繪圖對象）重新映射到畫布的中心： context.translate(radius, radius); //減少時鐘半徑（至90％）以在畫布內繪制時鐘： radius = radius * 0.90; //每隔一秒(1000毫秒)調用一次drawClock()函數 drawClock() setInterval(drawClock, 1000); //創建一個繪制時鐘的函數： function drawClock() { //畫一個圓形 // context.arc(0, 0, radius, 0, 2 * Math.PI); // context.fillStyle = "white"; // context.fill(); drawFace(context, radius); drawNumbers(context, radius); drawLine(context, radius); drawTime(context, radius); } /*** 第二部分 - 畫一個鐘面 * @param context -2D繪圖對象 * @param radius -時鐘半徑 */ function drawFace(context, radius) { let gradient; //起始一條路徑，或重置當前路徑 context.beginPath(); //畫出白色圓圈： context.arc(0, 0, radius, 0, 2 * Math.PI); //設置或返回用于填充繪畫的顏色、漸變或模式 context.fillStyle = "#f2ffe5"; //填充當前繪圖（路徑） context.fill(); //創建徑向漸變（原始時鐘半徑的95％和105％）： gradient = context.createRadialGradient( 0, 0, radius * 0.95, 0, 0, radius * 1.05 ); //創建3個顏色停止點，對應于弧的內邊，中邊和外邊： //顏色停止會產生3D效果 gradient.addColorStop(0, '#333'); gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1, '#333'); //將漸變定義為繪圖對象的筆觸樣式： context.strokeStyle = gradient; //定義圖紙對象的線寬（半徑的10％）： context.lineWidth = radius * 0.1; //畫圓圈： context.stroke(); //畫時鐘中心： context.beginPath(); //創建弧/曲線（用于創建圓形或部分圓） context.arc(0, 0, radius * 0.06, 0, 2 * Math.PI); context.fillStyle = '#333'; context.fill(); } /** * 第三部分 - 繪制時鐘數 * @param context -2D繪圖對象 * * @param radius -時鐘半徑 */ function drawNumbers(context, radius) { let angle; let num; //將（繪圖對象的）字體大小設置為半徑的15％： context.font = radius * 0.15 + "px arial"; //設置或返回在繪制文本時使用的當前文本基線 context.textBaseline = "middle"; //設置或返回文本內容的當前對齊方式。 context.textAlign = "center"; //計算打印位置（12個數字）到半徑的85％，每個數字旋轉（PI / 6）： for (num = 1; num <= 12; num++) { angle = num * Math.PI / 6; context.rotate(angle); //重新映射畫布上的 (0,0) 位置 context.translate(0, -radius * 0.85); context.rotate(-angle); //在畫布上繪制"被填充的"文本 context.fillText(num.toString(), 0, 0); context.rotate(angle); context.translate(0, radius * 0.85); context.rotate(-angle); } } /** * 第四部分 -畫時鐘表格線 * @param context -2D繪圖對象 * @param radius -時鐘半徑 */ function drawLine(context, radius) { let i; for (i = 1; i <= 60; i++) { if (i % 5 == 0) { context.strokeStyle = "red"; } else { context.strokeStyle = "black"; } context.beginPath(); context.lineWidth = radius * 0.02; context.rotate(i * Math.PI / 30); context.moveTo(0, -radius * 1.05); context.lineTo(0, -radius * 0.95); context.stroke(); context.rotate(-i * Math.PI / 30); } } /** * 第五部分 - 畫時鐘指針 * @param context -2D繪圖對象 * @param radius -時鐘半徑 */ function drawTime(context, radius) { //使用日期獲取小時，分鐘，秒： let date = new Date(); let hours = date.getHours(); let minutes = date.getMinutes(); let seconds = date.getSeconds(); //繪制時針 hours = hours % 12; // 計算時針的角度 hours = (hours * Math.PI / 6) + (minutes * Math.PI / (6 * 60)) + (seconds * Math.PI / (6 * 60 * 60)); //繪制一個長度（半徑的50％）和寬度（半徑的5％）的時針： drawHand(context, hours, radius * 0.4, radius * 0.05, "green"); //繪制分針 minutes = (minutes * Math.PI / 30) + (seconds * Math.PI / (30 * 60)); drawHand(context, minutes, radius * 0.7, radius * 0.04, "blue"); // 繪制秒針 seconds = (seconds * Math.PI / 30); drawHand(context, seconds, radius * 0.8, radius * 0.02, "red"); } /** * 繪制一條給定長度和寬度,并指定顏色的線,用來畫各種表針 * @param context -2D繪圖對象 * @param pos -旋轉角度 * @param length -長度 * @param width -寬度 */ function drawHand(context, pos, length, width, color) { //起始一條路徑，或重置當前路徑 context.beginPath(); //設置或返回當前的線條寬度 context.lineWidth = width; //設置或返回線條的結束端點樣式 //round 向線條的每個末端添加圓形線帽 context.lineCap = "round"; //把路徑移動到畫布中的指定點，不創建線條 context.moveTo(0, 0); //旋轉當前繪圖 context.rotate(pos); //添加一個新點，然后在畫布中創建從該點到最后指定點的線條 context.lineTo(0, -length); context.strokeStyle = color; //繪制已定義的路徑 context.stroke(); context.rotate(-pos); } </script> </body> </html> ~~~