JavaScript中的canvas 实现一个圆环渐变倒计时效果_javascript技巧_

.count-down { width: 100%; .row { padding: 0 145px; } .col-lg-3 { padding: 0; position: relative; .colck { width: 144px; height: 144px; background-color: #fff; margin: 0 auto; } } .days, .hours, .minutes { &:after, &:before { content: ""; display: block; width: 12px; height: 12px; background-color: #fff; position: absolute; right: -6px; } &:after { bottom: 45px; } &:before { top: 45px; } } }

// 获取4个 canvas 元素 var days_canvas = document.getElementById('days'); var hours_canvas = document.getElementById('hours'); var minutes_canvas = document.getElementById('minutes'); var seconds_canvas = document.getElementById('seconds');

// 设置倒计时时间：年 月 日 小时 分钟 秒 毫秒 endTime = setEndTime(2020, 11, 30, 15, 0, 0); // 设置到期时间 function setEndTime(year, month, day, hour, minute, millisecond) { return new Date(year, month - 1, day, hour, minute, millisecond); }

// 计算距离到期时间还剩下多少 days, hours, minutes function getLeftTimeObj() { var date = new Date(); var millisecond = date.getTime() var end_millisecond = endTime.getTime(); if (end_millisecond < millisecond) { return { days: 0, hours: 0, minutes: 0, seconds: 0 } } // 距离结束时间的秒数 var left_seconds = (( end_millisecond - millisecond ) / 1000); var seconds = (left_seconds % 60); var left_minutes = (left_seconds - seconds) / 60; var minutes = (left_minutes % 60); var left_hours = (left_minutes - minutes) / 60; var hours = (left_hours % 24); var left_days = ((left_hours - hours) / 24); return { days: left_days, hours: hours, minutes: minutes, seconds: seconds } } var dateObj = getLeftTimeObj();

 // 画整个圆 function drawCricle(canvas) { // 获取 context 对象 var context = canvas.getContext('2d'); // 获取 canvas 的中心点的 x 坐标 var centerX = canvas.width / 2; // 获取 canvas 的中心点的 y 坐标 var centerY = canvas.height / 2; context.save(); context.beginPath(); context.lineWidth = 7; context.strokeStyle = "#636363"; // 圆环的宽度为 7, canvas 元素的长和宽是 144, 所以圆半径应为 (144 - 7) / 2, 也就是 canvas.width / 2 - 3.5 context.arc(centerX, centerY, canvas.width / 2 - 3.5 , 0, Math.PI*2, false); context.stroke(); context.closePath(); context.restore(); } // 画数字下的字符 function drawStr(canvas, str) { var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; context.save(); context.fillStyle = '#fff'; context.font = "14px Arial"; //设置字体大小和字体 context.textAlign = 'center'; context.fillText(str, centerX, centerY+54); context.restore(); } // 画数字 function drawNumber(canvas, num) { var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; num = num.toFixed(); num = num < 10 ? '0' + num : num; context.save(); context.fillStyle = '#fff'; context.font = "bolder 60px Arial"; //设置字体大小和字体 context.textAlign = 'center'; // context.fontWeight = 'bold'; context.fillText(num, centerX, centerY+10); context.restore(); } // 画进度条 -0.5为起点 // percentage 为进度条的百分比（0

// 为秒计数的 canvas 绘图, 画图依赖 dateObj.seconds drawCricle(seconds_canvas); drawStr(seconds_canvas, 'Seconds'); // 每一分钟有60秒, 用 dateObj.seconds / 60 获得 当前进度 drawProgress(seconds_canvas, (dateObj.seconds / 60).toFixed(4)); drawNumber(seconds_canvas, dateObj.seconds);

// 绘图 function draw() { drawCricle(days_canvas); drawStr(days_canvas, 'Days'); drawProgress(days_canvas, dateObj.days / 10); drawNumber(days_canvas, dateObj.days); drawCricle(hours_canvas); drawStr(hours_canvas, 'Hours'); drawProgress(hours_canvas, (dateObj.hours / 24).toFixed(4)); drawNumber(hours_canvas, dateObj.hours); drawCricle(minutes_canvas); drawStr(minutes_canvas, 'Minutes'); drawProgress(minutes_canvas, (dateObj.minutes / 60).toFixed(4)); drawNumber(minutes_canvas, dateObj.minutes); drawCricle(seconds_canvas); drawStr(seconds_canvas, 'Seconds'); drawProgress(seconds_canvas, (dateObj.seconds / 60).toFixed(4)); drawNumber(seconds_canvas, dateObj.seconds); } drwa();

// 清除 canvas 内容 function clear() { var days_ctx = days_canvas.getContext('2d'); var hours_ctx = hours_canvas.getContext('2d'); var minutes_ctx = minutes_canvas.getContext('2d'); var seconds_ctx = seconds_canvas.getContext('2d'); days_ctx.clearRect(0, 0, days_canvas.width, days_canvas.height); hours_ctx.clea
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：vue3数据可视化实现数字滚动特效代码_vue.js_
                                                                
下一篇：React Hooks--useEffect代替常用生命周期函数方式_React_