微信小程序——绘制时钟

最新推荐文章于 2024-07-19 17:30:22 发布

dfrxa

最新推荐文章于 2024-07-19 17:30:22 发布

阅读量792

点赞数

分类专栏：微信小程序文章标签：编辑器

本文链接：https://blog.csdn.net/dfrxa/article/details/124180210

版权

本文介绍了如何在微信小程序中创建一个动态时钟，通过`index.js`、`index.wxml`、`index.wxss`及`App.json`的代码展示，详细讲解了时钟的绘制过程，并设置每秒更新时间的机制。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

时钟目录、效果图

在这里插入图片描述

index.js代码：

Page({
/**
* 页面的初始数据
*/
data: {

},
drawClock:function(){

    let width = 300,
    height=300
    var ctx= this.ctx
    ctx.translate(width/2,height/2)
    ctx.rotate(-Math.PI/2)
     
    ctx.lineWidth=6
    ctx.lineCap='round'
    for(let i=0;i<12;i++){
    ctx.beginPath()
    ctx.moveTo(80,0)
    ctx.lineTo(100,0)
    ctx.stroke()
    ctx.rotate(Math.PI/6)
    }

    ctx.lineWidth=5
    ctx.lineCap='round'
    for(let i = 0;i<60;i++