diff --git a/README.md b/README.md index 1c70300..add31ae 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ # clock +![时钟]("截图png") \ No newline at end of file diff --git a/app.json b/app.json new file mode 100644 index 0000000..77d3604 --- /dev/null +++ b/app.json @@ -0,0 +1,5 @@ +{ + "pages": [ + "pages/index/index" + ] +} \ No newline at end of file diff --git a/pages/index/index.js b/pages/index/index.js new file mode 100644 index 0000000..11b78b6 --- /dev/null +++ b/pages/index/index.js @@ -0,0 +1,201 @@ +// pages/index/index.js +Page({ + + /** + * 页面的初始数据 + */ + + width: 0, + height: 0, + + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function() { + //获取系统信息 + wx.getSystemInfo({ + //获取系统信息成功，保存获取到的系统窗口的宽高 + success: res => { + this.width = res.windowWidth + this.height = res.windowHeight + } + }) + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + timer: null, + onReady: function() { + //创建ctx实例 + var ctx = wx.createCanvasContext('myCanvas') + //将角度转换为弧度，方便后续使用 + //计算公式：弧度 = 角度 * Math.PI / 180 + const D6 = 6 * Math.PI /180 + const D30 = 30 * Math.PI /180 + const D90 = 90 * Math.PI /180 + //获取宽和高值 + var width = this.width, height = this.height + //计算表盘半径，留出30px外边框 + var radious = width / 2 - 30 + //每秒绘制一次 + draw() + this.timer = setInterval(draw, 1000) + //绘制函数 + function draw() { + //设置坐标轴原点为窗口的中心点 + ctx.translate(width / 2, height / 2) + //绘制表盘 + drawClock(ctx, radious) + // 绘制指针 + drawHand(ctx, radious) + // 绘制执行 + ctx.draw() + } + //绘制表盘部分 + function drawClock(ctx, radious) { + } + // 绘制指针部分 + function drawhand(ctx, radious) { + } + function drawClock(ctx, radious) { + // 绘制大圆 + // 大圆的半径为radious，线条粗细为2px + ctx.setLineWidth(2) + ctx.beginPath() + ctx.arc(0, 0, radious, 0, 2 * Math.PI, true) + ctx.stroke() + // 绘制中心圆 + // 中心圆的半径为8px， 线条粗细为1px + ctx.setLineWidth(1) + ctx.beginPath() + ctx.arc(0, 0, 8, 0, 2 * Math.PI, true) + ctx.stroke() + // 绘制大刻度盘，线条粗细为5px + ctx.setLineWidth(5) + for (var i = 0; i < 12; i++) { + // 以原点为中心顺时针旋转（多次调用旋转的角度会叠加） + // 大刻度盘需要绘制12个线条，表示12个小时，每次旋转30度 + ctx.rotate(D30) + ctx.beginPath() + ctx.moveTo(radious, 0) + ctx.lineTo(radious - 15, 0) + ctx.stroke() + } + // 绘制小刻度盘，线条粗细为1px + ctx.setLineWidth(1) + for (var i = 0; i < 60; i++) { + // 小刻度盘需要绘制60个线条，表示60分钟或60秒，每次旋转6度 + ctx.rotate(D6) + ctx.beginPath() + ctx.moveTo(radious, 0) + ctx.lineTo(radious - 10, 0) + ctx.stroke() + } + // 绘制文本 + ctx.setFontSize(20) + ctx.textBaseline = 'middle' + // 计算文本距离表盘中心的半径r + var r = radious - 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, tadious) { + var t = new Date() + var h = t.getHours() + var m = t.getMinutes() + var s = t.getSeconds() + h = h > 12 ? h - 12 : h + // 时间从3点开始，逆时针旋转90度，指向12点 + ctx.rotate(-D90) + // 绘制时针 + ctx.save() + // 计算时针指向的刻度 + // 通过30度*h可以计算每个整点的旋转角度 + // 如果时间不是整点，需要使用h + m/60+s/3600计算准确的偏移度 + ctx.rotate(D30 * (h + m / 60 + s /3600)) + ctx.setLineWidth(6) + ctx.beginPath() + ctx.moveTo(-20, 0) + ctx.lineTo(radious / 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(radious / 1.8, 0) + ctx.stroke() + ctx.restore() + // 绘制秒针 + ctx.save() + ctx.rotate(D6 * s) + ctx.setLineWidth(2) + ctx.beginPath() + ctx.moveTo(-20, 0) + ctx.lineTo(radious / 1.6, 0) + ctx.stroke() + ctx.restore() + } + }, + + + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/index/index.wxml b/pages/index/index.wxml new file mode 100644 index 0000000..833ebe8 --- /dev/null +++ b/pages/index/index.wxml @@ -0,0 +1,2 @@ + + diff --git a/pages/index/index.wxss b/pages/index/index.wxss new file mode 100644 index 0000000..9881179 --- /dev/null +++ b/pages/index/index.wxss @@ -0,0 +1,5 @@ +.mycanvas { + width: 100%; + height: 100%; + position: fixed; +} \ No newline at end of file diff --git a/project.config.json b/project.config.json new file mode 100644 index 0000000..b5794da --- /dev/null +++ b/project.config.json @@ -0,0 +1,52 @@ +{ + "description": "项目配置文件", + "packOptions": { + "ignore": [], + "include": [] + }, + "setting": { + "bundle": false, + "userConfirmedBundleSwitch": false, + "urlCheck": true, + "scopeDataCheck": false, + "coverView": true, + "es6": true, + "postcss": true, + "compileHotReLoad": false, + "lazyloadPlaceholderEnable": false, + "preloadBackgroundData": false, + "minified": true, + "autoAudits": false, + "newFeature": false, + "uglifyFileName": false, + "uploadWithSourceMap": true, + "useIsolateContext": true, + "nodeModules": false, + "enhance": true, + "useMultiFrameRuntime": true, + "useApiHook": true, + "useApiHostProcess": true, + "showShadowRootInWxmlPanel": true, + "packNpmManually": false, + "enableEngineNative": false, + "packNpmRelationList": [], + "minifyWXSS": true, + "showES6CompileOption": false, + "minifyWXML": true, + "babelSetting": { + "ignore": [], + "disablePlugins": [], + "outputPath": "" + }, + "condition": false + }, + "compileType": "miniprogram", + "libVersion": "2.19.4", + "appid": "wxd6d38f0787fb9330", + "projectname": "miniprogram-92", + "condition": {}, + "editorSetting": { + "tabIndent": "auto", + "tabSize": 2 + } +} \ No newline at end of file diff --git a/project.private.config.json b/project.private.config.json new file mode 100644 index 0000000..1fe2c4d --- /dev/null +++ b/project.private.config.json @@ -0,0 +1,7 @@ +{ + "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "projectname": "oclock", + "setting": { + "compileHotReLoad": true + } +} \ No newline at end of file diff --git a/截图.png b/截图.png new file mode 100644 index 0000000..61c08a1 Binary files /dev/null and b/截图.png differ