From 0442b956464adb50c44e53d427500720962b7508 Mon Sep 17 00:00:00 2001 From: hcd <1263918963@qq.com> Date: Fri, 2 Jun 2023 22:29:38 +0800 Subject: [PATCH] shizhong --- miniprogram-1/.DS_Store | Bin 0 -> 6148 bytes miniprogram-1/ShiZhong | 1 + miniprogram-1/app.js | 0 miniprogram-1/app.json | 5 + miniprogram-1/pages/index/index.js | 147 ++++++++++++++++++++++ miniprogram-1/pages/index/index.json | 1 + miniprogram-1/pages/index/index.wxml | 2 + miniprogram-1/pages/index/index.wxss | 6 + miniprogram-1/project.config.json | 30 +++++ miniprogram-1/project.private.config.json | 7 ++ 10 files changed, 199 insertions(+) create mode 100644 miniprogram-1/.DS_Store create mode 160000 miniprogram-1/ShiZhong create mode 100644 miniprogram-1/app.js create mode 100644 miniprogram-1/app.json create mode 100644 miniprogram-1/pages/index/index.js create mode 100644 miniprogram-1/pages/index/index.json create mode 100644 miniprogram-1/pages/index/index.wxml create mode 100644 miniprogram-1/pages/index/index.wxss create mode 100644 miniprogram-1/project.config.json create mode 100644 miniprogram-1/project.private.config.json diff --git a/miniprogram-1/.DS_Store b/miniprogram-1/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..2194946ee7192ef30d16f29d637de8aaba878607 GIT binary patch literal 6148 zcmeHK%}T>S5T2>6M7$Kd2qNqg6#52hsRz%#fNlJtrI@1CbM8Kj&*w?M`Jpt4f+vwO z6K22N$;|BL+mOi;5l>!j$3#OSDxiYBBQ)QL+!yUg&n*KWYmOy7U#+TgzN+RO?=bvF z24wFJX+~>YBWmuSyc8GE(Wi)N{W@mnj)StpBRUC=95u|ekFW&LPn#V{lo2nK?IJz@YgTckKP zj5Zhu27-Yt1M+=HP{Hh28|tS6jUEAjeVA3ym)}5%NsigEHpCqWTPV;%*^d}(;jkz7 z%Z|07g%kVXgMDW96AJ6>$e+}mI2%SA3fZ4G&gar~m0!l+P!N8v~@CD0q BS-$`P literal 0 HcmV?d00001 diff --git a/miniprogram-1/ShiZhong b/miniprogram-1/ShiZhong new file mode 160000 index 0000000..5a90395 --- /dev/null +++ b/miniprogram-1/ShiZhong @@ -0,0 +1 @@ +Subproject commit 5a9039549d6b7659673a4a9fa05cd2ffd6bd487f diff --git a/miniprogram-1/app.js b/miniprogram-1/app.js new file mode 100644 index 0000000..e69de29 diff --git a/miniprogram-1/app.json b/miniprogram-1/app.json new file mode 100644 index 0000000..36b97d2 --- /dev/null +++ b/miniprogram-1/app.json @@ -0,0 +1,5 @@ +{ + "pages":[ + "pages/index/index" + ] +} \ No newline at end of file diff --git a/miniprogram-1/pages/index/index.js b/miniprogram-1/pages/index/index.js new file mode 100644 index 0000000..a788d56 --- /dev/null +++ b/miniprogram-1/pages/index/index.js @@ -0,0 +1,147 @@ +Page({ + width: 0, // 窗口宽度 + height: 0, // 窗口高度 + timer: null, // 定时器 + onLoad: function () { + // 获取系统信息 + wx.getSystemInfo({ + success: res => { + console.log(res) + // 获取窗口宽高 + this.width = res.windowWidth + this.height = res.windowHeight + } + }) + }, + onReady: function () { + + // 将角度转换为弧度 + const D6 = 6 * Math.PI / 180 + const D30 = 30 * Math.PI / 180 + const D90 = 90 * Math.PI / 180 + + // 创建CanvasContext + var ctx = wx.createCanvasContext('myCanvas') + + var width = this.width + var height = this.height + + // 计算表盘半径，留出 30px 外边距 + var radius = width / 2 - 30 + + draw() + this.timer = setInterval(draw, 1000) + + function draw() { + // 设置坐标轴原点为窗口的中心点 + ctx.translate(width / 2, height / 2) + // 绘制表盘 + drawClock(ctx, radius) + // 绘制指针 + drawHand(ctx, radius) + // 执行绘制 + ctx.draw() + } + + function drawClock(ctx, radius) { + + // 绘制大圆 + ctx.setLineWidth(2) // 设置线条的粗细，单位px + ctx.beginPath() // 开始一个新路径 + ctx.arc(0, 0, radius, 0, 2 * Math.PI, true) + ctx.stroke() + + // 绘制中心圆 + ctx.setLineWidth(1) + ctx.beginPath() + ctx.arc(0, 0, 8, 0, 2 * Math.PI, true) // 半径8px + ctx.stroke() + + // 绘制大刻度盘 + ctx.setLineWidth(5) + for (var i = 0; i < 12; ++i) { + // 以原点为中心顺时针旋转（多次调用旋转的角度会叠加） + ctx.rotate(D30) // 360 / 12 = 30 + ctx.beginPath() + ctx.moveTo(radius, 0) + ctx.lineTo(radius - 15, 0) // 大刻度长度15px + ctx.stroke() + } + + // 绘制小刻度盘 + ctx.setLineWidth(1) + for (var i = 0; i < 60; ++i) { + ctx.rotate(D6) // 360 / 60 = 6 + ctx.beginPath() + ctx.moveTo(radius, 0) + ctx.lineTo(radius - 10, 0) // 小刻度盘长度10px + ctx.stroke() + } + + // 绘制文本 + ctx.setFontSize(20) // 字号 + ctx.textBaseline = 'middle' // 文本上下居中 + + // 文本距离时钟中心点半径 + var r = radius - 30 + + for (var i = 1; i <= 12; ++i) { + // 利用三角函数计算文本坐标 + var x = r * Math.cos(D30 * i - D90) + var y = r * Math.sin(D30 * i - D90) + if (i > 10) { // 调整 11 和 12 的位置 + // 在画布上绘制文本 fillText(文本, 左上角x坐标, 左上角y坐标) + ctx.fillText(i, x - 12, y) + } else { + ctx.fillText(i, x - 6, y) + } + } + } + + // 绘制指针 + function drawHand(ctx, radius) { + var t = new Date() // 获取当前时间 + var h = t.getHours() // 小时 + var m = t.getMinutes() // 分 + var s = t.getSeconds() // 秒 + h = h > 12 ? h - 12 : h // 将24小时制转化为12小时制 + + // 时间从3点开始，逆时针旋转90度，指向12点 + ctx.rotate(-D90) + + // 绘制时针 + ctx.save() // 记录旋转状态 + ctx.rotate(D30 * (h + m / 60 + s / 3600)) + ctx.setLineWidth(6) + ctx.beginPath() + ctx.moveTo(-20, 0) // 线条起点（针尾留出20px） + ctx.lineTo(radius / 2.6, 0) // 线条长度 + ctx.stroke() + ctx.restore() // 恢复旋转状态，避免旋转叠加 + + // 绘制分针 + ctx.save() + ctx.rotate(D6 * (m + s / 60)) + ctx.setLineWidth(4) + ctx.beginPath() + ctx.moveTo(-20, 0) + ctx.lineTo(radius / 1.8, 0) + ctx.stroke() + ctx.restore() + + // 绘制秒针 + ctx.save() + ctx.rotate(D6 * s) + ctx.setLineWidth(2) + ctx.beginPath() + ctx.moveTo(-20, 0) + ctx.lineTo(radius / 1.6, 0) + ctx.stroke() + ctx.restore() + } + }, + // 页面卸载，清除画布绘制定时器 + onUnload: function () { + clearInterval(this.timer) + } +}) \ No newline at end of file diff --git a/miniprogram-1/pages/index/index.json b/miniprogram-1/pages/index/index.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/miniprogram-1/pages/index/index.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/miniprogram-1/pages/index/index.wxml b/miniprogram-1/pages/index/index.wxml new file mode 100644 index 0000000..e70260a --- /dev/null +++ b/miniprogram-1/pages/index/index.wxml @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/miniprogram-1/pages/index/index.wxss b/miniprogram-1/pages/index/index.wxss new file mode 100644 index 0000000..e2e1f30 --- /dev/null +++ b/miniprogram-1/pages/index/index.wxss @@ -0,0 +1,6 @@ + +.mycanvas { + width: 100%; + height: 100%; + position:fixed; +} diff --git a/miniprogram-1/project.config.json b/miniprogram-1/project.config.json new file mode 100644 index 0000000..aee534d --- /dev/null +++ b/miniprogram-1/project.config.json @@ -0,0 +1,30 @@ +{ + "description": "项目配置文件", + "packOptions": { + "ignore": [], + "include": [] + }, + "setting": { + "urlCheck": true, + "es6": true, + "postcss": true, + "minified": true, + "newFeature": true, + "autoAudits": false, + "babelSetting": { + "ignore": [], + "disablePlugins": [], + "outputPath": "" + }, + "condition": false + }, + "compileType": "miniprogram", + "libVersion": "2.5.1", + "appid": "wxb3b862a0076ce067", + "projectname": "clock", + "condition": {}, + "editorSetting": { + "tabIndent": "insertSpaces", + "tabSize": 2 + } +} \ No newline at end of file diff --git a/miniprogram-1/project.private.config.json b/miniprogram-1/project.private.config.json new file mode 100644 index 0000000..54d5f9d --- /dev/null +++ b/miniprogram-1/project.private.config.json @@ -0,0 +1,7 @@ +{ + "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "projectname": "%E3%80%90%E6%A1%88%E4%BE%8B5%E3%80%91%E6%A8%A1%E6%8B%9F%E6%97%B6%E9%92%9F", + "setting": { + "compileHotReLoad": true + } +} \ No newline at end of file