用JS Canvas画一个腕表⌚️送给自己
没钱买表 某前台程序员竟然 用代码画了个表?
clock.jpeg
在线Demo https://codepen.io/DiscoverForever/pen/dyXKaqb
HTML代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> <style> html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } #canvas { width: 200px; height: 200px; } </style> <script src="./index.js"></script></head><body> <canvas id="canvas" width="200" height="200"></canvas></body></html>Javascript代码
function init() { const canvas = document.getElementById('canvas') const width = canvas.width const height = canvas.height canvas.style.width = width + 'px' canvas.style.height = height + 'px' canvas.height = height * devicePixelRatio canvas.width = width * devicePixelRatio let ctx = null if (canvas.getContext) { ctx = canvas.getContext('2d') } else { alert('该浏览器暂不支持Canvas') return } setInterval(() => { // 清空画布 canvas.height = height * devicePixelRatio canvas.width = width * devicePixelRatio run(ctx) }, 1000)}function run(ctx) { const date = new Date() renderCircle(ctx, 100, 100, 99, 'grey') renderCircle(ctx, 100, 100, 94, 'black') renderHourHand(ctx, getHourHandAngle(date.getHours())) renderMinuteHand(ctx, getMinuteHandAngle(date.getMinutes())) renderSecondHand(ctx, getSecondHandAngle(date.getSeconds())) artCenterCircle(ctx) renderScaleLabel(ctx) renderHourScale(ctx) renderMinuteScale(ctx)}/** * 获取时针偏转角度 * @param {*} second * @returns */function getHourHandAngle(hour) { let currentHour = null if (hour <= 12) { currentHour = hour } else { currentHour = hour - 12 } return currentHour * 30 * (Math.PI / 180)}/** * 获取分针偏转角度 * @param {*} second * @returns */function getMinuteHandAngle(minute) { return minute * 6 * (Math.PI / 180)}/** * 获取秒针偏转角度 * @param {*} second * @returns */function getSecondHandAngle(second) { return second * 6 * (Math.PI / 180)}/** * 画圆 */function renderCircle(ctx, x, y, radius, color, lineWidth = 1) { ctx.beginPath() ctx.strokeStyle = color ctx.lineWidth = lineWidth ctx.arc(x * devicePixelRatio, y * devicePixelRatio, radius * devicePixelRatio, 0, 2 * Math.PI, false) ctx.stroke() ctx.closePath()}/** * 画时针 * @param {*} ctx * @param {*} angle */function renderHourHand(ctx, angle) { ctx.beginPath() ctx.save() ctx.translate(100 * devicePixelRatio, 100 * devicePixelRatio) ctx.rotate(angle) ctx.strokeStyle = 'black' ctx.lineWidth = 10 ctx.moveTo(0, 0) ctx.lineTo(0, -40 * devicePixelRatio) ctx.stroke() ctx.restore() ctx.closePath()}/** * 画分针 * @param {*} ctx * @param {*} angle */function renderMinuteHand(ctx, angle) { ctx.beginPath() ctx.save() ctx.translate(100 * devicePixelRatio, 100 * devicePixelRatio) ctx.rotate(angle) ctx.strokeStyle = 'black' ctx.lineWidth = 6 ctx.moveTo(0, 0) ctx.lineTo(0, -60 * devicePixelRatio) ctx.stroke() ctx.restore() ctx.closePath()}/** * 画秒针 * @param {*} ctx * @param {*} angle */function renderSecondHand(ctx, angle) { ctx.beginPath() ctx.save() ctx.translate(100 * devicePixelRatio, 100 * devicePixelRatio) ctx.rotate(angle) ctx.strokeStyle = 'black' ctx.lineWidth = 2 ctx.moveTo(0, 0) ctx.lineTo(0, -90 * devicePixelRatio) ctx.stroke() ctx.restore() ctx.closePath()}/** * 表心 * @param {*} ctx */function artCenterCircle(ctx) { ctx.beginPath() ctx.lineWidth = 1 ctx.fillStyle = 'black' ctx.arc(100 * devicePixelRatio, 100 * devicePixelRatio, 4 * devicePixelRatio, 0, 2 * Math.PI, false) ctx.fill()}/** * 画表盘刻度 * @param {*} ctx */function renderScale(ctx) { const lables = genClockScale(100, 100, 94) ctx.beginPath() lables.forEach(label => { ctx.moveTo(label.x, label.y) ctx.lineTo(100 * devicePixelRatio, 100 * devicePixelRatio) }) ctx.stroke()}/** * 画小时刻度 */function renderHourScale(ctx) { for (var i = 0; i < 12; i++) { ctx.beginPath() ctx.save() ctx.translate(102 * devicePixelRatio, 98 * devicePixelRatio) ctx.lineWidth = 2 ctx.strokeStyle = 'black' ctx.rotate(i * 30 * Math.PI / 180) ctx.moveTo(0, -94 * devicePixelRatio) ctx.lineTo(0, -89 * devicePixelRatio) ctx.stroke() ctx.restore() ctx.closePath() }}/** * 画分刻度 */function renderMinuteScale(ctx) { for (var i = 0; i < 60; i++) { ctx.beginPath() ctx.save() ctx.translate(102 * devicePixelRatio, 98 * devicePixelRatio) ctx.lineWidth = 1 ctx.strokeStyle = 'black' ctx.rotate(i * 6 * Math.PI / 180) ctx.moveTo(0, -94 * devicePixelRatio) ctx.lineTo(0, -92 * devicePixelRatio) ctx.stroke() ctx.restore() ctx.closePath() }}/** * 画表盘数字 */function renderScaleLabel(ctx) { const lables = genClockScale(100, 100, 82) ctx.beginPath() ctx.font = `${10 * devicePixelRatio}px Pingfang` ctx.translate(-2 * devicePixelRatio, 2 * devicePixelRatio) lables.forEach(label => ctx.fillText(label.text, label.x, label.y)) ctx.translate(0, 0) ctx.closePath()}/** * 获取刻度坐标 * @param {*} x 圆心x * @param {*} y 圆心y * @param {*} radius 半径 * @returns */function genClockScale(ccX, ccY, radius, offset = 0) { const lables = [9, 10, 11, 12, 1, 2, 3, 4, 5, 6, 7, 8] return lables.map((label, index) => { const angle = Math.PI * 2 / 12 * index let x = ccX - radius * Math.cos(angle) + offset let y = ccY - radius * Math.sin(angle) + offset return { angle, text: label, x: x * devicePixelRatio, y: y * devicePixelRatio, } })}window.onload = init说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 用JS Canvas画一个腕表⌚️送给自己
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 用JS Canvas画一个腕表⌚️送给自己
