shizhong

miniprogram-1/ShiZhong

@@ -0,0 +1 @@
+Subproject commit 5a9039549d6b7659673a4a9fa05cd2ffd6bd487f

miniprogram-1/app.json

@@ -0,0 +1,5 @@
+{
+  "pages":[
+    "pages/index/index"
+  ]
+}

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)
+  }
+})

miniprogram-1/pages/index/index.json

@@ -0,0 +1 @@
+{}

miniprogram-1/pages/index/index.wxml

@@ -0,0 +1,2 @@
+<!-- canvas组件 -->
+<canvas canvas-id="myCanvas" class="mycanvas"></canvas>

miniprogram-1/pages/index/index.wxss

@@ -0,0 +1,6 @@
+
+.mycanvas {
+  width: 100%;
+  height: 100%;
+  position:fixed;
+}

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
+  }
+}

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
+  }
+}