微信小程序入门之绘制时钟

微信小程序入门案例——绘制时钟,供大家参考,具体内容如下

涉及内容:canvas、每秒刷新页面、绘制

目录结构:

pages\index\index.js

Page({

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

 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 this.ctx = wx.createCanvasContext('clockCanvas')
 this.drawClock()
 var that = this
 this.interval=setInterval(function(){
  that.drawClock()
 },1000)

 },

 /**
 * 绘制时钟
 */
 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++){
  ctx.beginPath()
  ctx.moveTo(88,0)
  ctx.lineTo(100,0)
  ctx.stroke()
  ctx.rotate(Math.PI/30)
 }

 /**
  * 获取按当前时间
  */
 let time = this.getTime()
 let h = time[0]
 let m = time[1]
 let s = time[2]

 /**
  * 绘制时钟指针
  */
 ctx.save()
 ctx.rotate(h * Math.PI/6 + m * Math.PI/360 + s * Math.PI/21600)
 ctx.lineWidth=12
 ctx.beginPath()
 ctx.moveTo(-20,0)
 ctx.lineTo(60,0)
 ctx.stroke()
 ctx.restore()
 /**
  * 绘制时钟分针
  */
 ctx.save()
 ctx.rotate(m * Math.PI/30 + s * Math.PI/1800)
 ctx.lineWidth=8
 ctx.beginPath()
 ctx.moveTo(-20,0)
 ctx.lineTo(82,0)
 ctx.stroke()
 ctx.restore()
 /**
  * 绘制时钟妙针
  */
 ctx.save()
 ctx.rotate(s*Math.PI/30)
 ctx.strokeStyle = 'red'
 ctx.lineWidth = 6
 ctx.beginPath()
 ctx.moveTo(-30,0)
 ctx.lineTo(90,0)
 ctx.stroke()

 ctx.fillStyle='red'
 ctx.beginPath()
 ctx.arc(0,0,10,0,Math.PI*2,true)
 ctx.fill()
 ctx.restore()

 /**
  * 绘制
  */
 ctx.draw()

 /**
  * 更新页面显示时间
  */
 this.setData({
  h:h>9?h:'0'+h,
  m:m>9?m:'0'+m,
  s:s>9?s:'0'+s
 })
 },
 getTime:function(){
 let now = new Date()
 let time=[]
 time[0]=now.getHours()
 time[1]=now.getMinutes()
 time[2]=now.getSeconds()

 if(time[0]>12){
  time[0]-=12
 }
 return time
 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 clearInterval(this.interval)
 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
}) 

pages\index\index.wxml

<view class="container">
 <text>My Clock</text>
 <canvas canvas-id="clockCanvas"></canvas>
 <text>{{h}}:{{m}}:{{s}}</text>
</view>

pages\index\index.wxss

.container{
 height: 100vh;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-around;
}
text{
 font-size: 40pt;
 font-weight: bold;
}
canvas{
 width: 600rpx;
 height: 600rpx;

} 

app.js

App({

 /**
 * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
 */
 onLaunch: function () {

 },

 /**
 * 当小程序启动,或从后台进入前台显示,会触发 onShow
 */
 onShow: function (options) {

 },

 /**
 * 当小程序从前台进入后台,会触发 onHide
 */
 onHide: function () {

 },

 /**
 * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
 */
 onError: function (msg) {

 }
}) 

app.json

{
 "pages":[
 "pages/index/index"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "我的时钟",
 "navigationBarTextStyle":"black"
 },
 "style": "v2",
 "sitemapLocation": "sitemap.json"
}

运行截图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JS绘制微信小程序画布时钟

    微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟. 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序,通过app.json公共设置来配置入口. 首先来看一下构建这样一个小程序所需要的目录结构 从目录结构就可以看出来这个程序是简单的单层页面,画布渲染在pages下面的index页面上. 其中对程序有实际驱动作用的代码分别在index.js,index.wxml,index.wxss和app.json这几个文件中 Index.js文件里面存放着程序的逻辑层数据,

  • 微信小程序入门之绘制时钟

    微信小程序入门案例--绘制时钟,供大家参考,具体内容如下 涉及内容:canvas.每秒刷新页面.绘制 目录结构: pages\index\index.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.ctx = wx.createCanvasContext('clockCanvas') this.drawClock() var that = this th

  • 微信小程序使用canvas绘制钟表

    本文实例为大家分享了微信小程序使用canvas绘制钟表的具体代码,供大家参考,具体内容如下 模拟时钟 利用canvas绘制时钟,实现模拟时钟的功能,钟表时间与系统时间保持一致,刻度将24小时制转换为12小时制,需要分别绘图出中心圆.外层大圆.分针.时针.秒针. 效果图如下: 代码如下: index.wxml <canvas canvas-id="myCanvas" class="mycanvas"></canvas> index.wxss /

  • 微信小程序实现的绘制table表格功能示例

    本文实例讲述了微信小程序实现的绘制table表格功能.分享给大家供大家参考,具体如下: 表格的绘制 js Page({ data:{ infeed:['"", "1周", "2周", "3周", "总计"], endwise1: "游泳", tb1:"0", tb2:"0", tb3:"0", tb4:"0"

  • 微信小程序利用canvas 绘制幸运大转盘功能

    小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, restaraunts: [], //大转盘奖品信息 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var self = this; wx.getSystemInfo({ //获取系统信息成功,将系统窗口的宽高赋给页面的宽高 success:

  • 微信小程序入门之广告条实现方法示例

    本文实例讲述了微信小程序入门之广告条实现方法.分享给大家供大家参考,具体如下: 在小程序页面,有时候需要弄一条广告条进去,作用可以用来提醒客户端,更加醒目,这种实现很容易,要用到组件swiper,navigator 先上效果图: wxml: <swiper class="swiper_container" autoplay="true" interval="2000" circular="true"> <bl

  • 详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

    (一) 准备工作 (1) 登录注册 注册账号:这就不谈了,只需要注意使用一个全新的邮箱,别之前注册过公众号小程序等就可以了 https://mp.weixin.qq.com/wxopen/waregister?action=step1 登录账号:通过邮箱密码登录,亦或者绑定微信后使用扫码也是可以的 https://mp.weixin.qq.com/ (2) 获取 APPID 登录后,在开发入门的阶段有一个比较重要的内容需要了解,那就是 APPID,很好理解,就是这个小程序的唯一标识,就类似我们的

  • 微信小程序入门之指南针

    微信小程序入门案例--指南针,供大家参考,具体内容如下 涉及技术:获取地理位置.监听指南针角度 目录结构: pages\index\index.js Page({ /** * 页面的初始数据 */ data: { rotate:0, degree:'未知', direction:'', lat:0, lon:0, alt:0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; wx.getLocatio

  • 微信小程序入门教程

    微信小程序(下面简称小程序)近些月来刷爆了我们这些程序猿们的圈子,可以说无数的程序猿磨刀霍霍,准备在这快蛋糕上杀出一片天地.那么作为前端开发人员,小程序开发和我们平常的开发有什么不同的地方呢?让我们一起来走进门里看看. 我们从下面几个方向来了解一下小程序的开发: 1.开发工具 2.布局差异 3.JS差异 4.其它 序 先看一张小程序初始化的目录: 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page.一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:app.js.ap

  • 详解微信小程序入门五: wxml文件引用、模版、生命周期

    实例一: include方式引用header.wxml文件 文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用. 微信小程序里面,是包含引用功能的--include.import.这两个引用文件的标签,使用基本差不多,这里先说一下include. 微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到引用位置,所以我们需要重新对其渲染. 实例说明 这里将默认创建的用户头像信息提取出

  • 微信小程序利用Canvas绘制图片和竖排文字详解

    前言 闲暇时间抽个空写了个三国杀武将手册的小程序,中间有个需求设计的是合成武将皮肤图.竖排的武将姓名.以及小程序码,然后提供保存图片到相册,最终让用户可以分享到朋友圈或其他平台.合成图片应该按照 Canvas 的文档来做都没什么问题,主要是有个竖排文字的需求,这里和大家分享一下. 正文 首先放一张最终保存到相册的图片吧~ 自我感觉良好,至少达到了我自己的预期吧~~~ 下面让我们一步一步来看看如何实现的吧. 整个图片分为三个部分: 武将图片 小程序码 武将文字信息 先来看一下 wxml 里面的代码

随机推荐