您好,登錄后才能下訂單哦!
H5如何實(shí)現(xiàn)可縮放的時(shí)鐘動(dòng)畫(huà)?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。
廢話(huà)不多說(shuō)了,直接給大家貼代碼了,具體代碼如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas_time</title> <style type="text/css"> p { text-align: center; margin-top: 250px; } #clock { border: 1px solid #cccccc; } </style> </head> <body> <p> <canvas id="clock" height="600px" width="600px"></canvas> </p> <script type="text/JavaScript" > var dom = document.getElementById('clock'); var ctx = dom.getContext('2d'); var width = ctx.canvas.width; var height = ctx.canvas.height; var r = width / 2; var rem = width/200; function drawBackground() { ctx.save(); //存儲(chǔ)當(dāng)前環(huán)境變量; ctx.translate(r, r); //重置坐標(biāo)到r,r ctx.beginPath(); // 起始一條路徑 ctx.lineWidth = 10*rem; //設(shè)置線(xiàn)寬10; ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false); ctx.stroke(); var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定義數(shù)組 ctx.font = 18*rem+"px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; hourNumbers.forEach(function(number, i) { var rad = 2 * Math.PI / 12 * i; var x = Math.cos(rad) * (r - 30*rem); var y = Math.sin(rad) * (r - 30*rem); ctx.fillText(number, x, y); }); for (var i = 0; i < 60; i++) { var rad = 2 * Math.PI / 60 * i; var x = Math.cos(rad) * (r - 18*rem); var y = Math.sin(rad) * (r - 18*rem); ctx.beginPath(); if (i % 5 === 0) { ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false); ctx.fillStyle = "#000"; } else { ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false); ctx.fillStyle = "#ccc"; } ctx.fill(); } } function drawHour(hour, minute) { ctx.save(); ctx.beginPath(); var rad = 2 * Math.PI / 12 * hour; var mrad = 2 * Math.PI / 12 / 60 * minute; ctx.rotate(rad + mrad); ctx.lineWidth = 6*rem; ctx.lineCap = "round"; ctx.moveTo(0, 10*rem); ctx.lineTo(0, -r / 2); ctx.stroke(); ctx.restore(); } function drawMinute(minute) { ctx.save(); ctx.beginPath(); var rad = 2 * Math.PI / 60 * minute; ctx.rotate(rad); ctx.lineWidth = 3*rem; ctx.lineCap = "round"; ctx.moveTo(0, 10*rem); ctx.lineTo(0, -r + 30*rem); ctx.stroke(); ctx.restore(); } function drawSecond(second) { ctx.save(); ctx.beginPath(); ctx.fillStyle = 'red'; var rad = 2 * Math.PI / 60 * second; ctx.rotate(rad); ctx.moveTo(-2*rem, 20*rem); ctx.lineTo(2*rem, 20*rem); ctx.lineTo(1, -r + 16*rem); ctx.lineTo(-1, -r + 16*rem); ctx.fill(); ctx.restore(); } function drawDot() { ctx.beginPath(); ctx.fillStyle = '#fff'; ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false); ctx.fill(); } function draw01() { ctx.clearRect(0, 0, width, height); var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); drawBackground(); drawHour(hour, minute); drawMinute(minute); drawSecond(second); drawDot(); ctx.restore(); } draw01(); setInterval(draw01, 1000); </script> </body> </html>
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。