javascript canvas封装动态时钟

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas绘制动态时钟</title> <style> #clock { display: block; margin: 30px auto; } </style> </head> <body> <canvas id="clock" width="200" height="200"></canvas> <script> function canvasClock(canvasClockObj) { return (function (canvasClockObj) { var ctx = canvasClockObj.dom.getContext('2d') let width = ctx.canvas.width let height = ctx.canvas.height let r = width > height ? height / 2 : width / 2 // 绘制背景板 function drawBackground() { // 绘制外圈圆环 ctx.save() // 每次开始前都要保存当前画布状态，以免移动画布影响后续绘制 ctx.translate(r, r) // 设置起始点为圆心 ctx.beginPath() // 每次开始绘制前必须开始一条路径 ctx.lineWidth = 10 // 设置绘线的宽度 ctx.strokeStyle = canvasClockObj.outerRing ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false) // 画一个整圆 ctx.stroke() // 对圆进行描边 ctx.strokeStyle = '#000' // 绘制分钟和小时 var minuteNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60] minuteNumbers.map(function (number, i) { var rad = 2 * Math.PI / 60 * i var x = Math.cos(rad) * (r - 17) // 获取每分钟的x轴坐标 var y = Math.sin(rad) * (r - 17) // 获取每分钟的y轴坐标 ctx.beginPath() // 每次开始绘制前必须开始一条路径 ctx.fillStyle = '#ccc' ctx.arc(x, y, 2, 0, 2 * Math.PI, false) ctx.fill() }) var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2] hourNumbers.map(function (number, i) { var rad = 2 * Math.PI / 12 * i var x = Math.cos(rad) * (r - 30) var y = Math.sin(rad) * (r - 30) var x1 = Math.cos(rad) * (r - 17) var y1 = Math.sin(rad) * (r - 17) ctx.beginPath() // 每次开始绘制前必须开始一条路径 ctx.fillStyle = canvasClockObj.hourColor ? canvasClockObj.hourColor :'#000' // 设置小时的颜色 ctx.textAlign = 'center' // 使文字左右居中 ctx.textBaseline = 'middle' // 使文字上下居中 ctx.font = 14 + 'px Arial' ctx.fillText(number, x, y) ctx.arc(x1, y1, 2, 0, 2 * Math.PI, false) ctx.fill() }) } drawBackground() // 绘制圆心 function drawDot() { ctx.beginPath() ctx.fillStyle = '#fff' ctx.lineWidth = 1 ctx.arc(0, 0, 3, 2 * Math.PI, false) ctx.fill() } // 绘制时针 function drawHour(hour, minute) { ctx.save() ctx.beginPath() var hrad = Math.PI / 12 * hour * 2 var mrad = Math.PI / 12 / 60 * minute * 2 ctx.rotate(hrad + mrad) ctx.lineWidth = 4 ctx.moveTo(0, 10) ctx.lineTo(0, -r / 2.5) ctx.lineCap = 'round' ctx.stroke() ctx.restore() } // 绘制分针 function drawMinute(minute, second) { ctx.save() ctx.beginPath() var mrad = Math.PI / 60 * minute * 2 var srad = Math.PI / 60 / 60 * second * 2 ctx.rotate(srad + mrad) ctx.lineWidth = 0.5 ctx.lineJoin = 'round' ctx.fillStyle = '#000' ctx.moveTo(2, 10) ctx.lineTo(0, -r / 1.7) ctx.lineTo(-2, 10) ctx.lineTo(2, 10) ctx.lineCap = 'round' ctx.fill() ctx.restore() } // 绘制秒针 function drawSecond(second) { ctx.save() ctx.beginPath() var srad = Math.PI / 30 * second ctx.rotate(srad) ctx.lineWidth = 0.5 ctx.lineJoin = 'round' ctx.fillStyle = canvasClockObj.secondHand ? canvasClockObj.secondHand : '#f00' ctx.moveTo(2, 10) ctx.lineTo(0, -r / 1.2) ctx.lineTo(-2, 10) ctx.lineTo(2, 10) ctx.lineCap = 'round' ctx.fill() ctx.restore() } // 使指针动起来 function draw() { ctx.translate(-r, -r) 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,second); //绘制分针 drawSecond(second); //绘制秒针 drawDot(); //绘制原点 } draw() setInterval(draw, 1000); })(canvasClockObj) } canvasClock({ dom:document.getElementById('clock'), // 必填项： canvas节点 // outerRing:'purple', // 外圈圆环颜色默认值： #000 // hourColor:'skyblue', // 小时的颜色默认值 #000 // secondHand:'yellow' // 秒针的颜色默认值： #f00 }) </script> </body> </html>

相关阅读