微信小程序canvas时钟

代码：wxml:[html] <view style='width:100%;height:{{canvasHeight}}px' catchtap='goCountdown'catchlongtap='touchstart' catchtouchend='touchend'>  <canvas canvas-id='clock' style='width:100%;height:{{canvasHeight}}px'></canvas>
</view>
js:[javascript]Page({  data: {  width: 0,  height: 0,  showMask: false  },  onLoad: function (options) {  var that = this  //获取系统信息    wx.getSystemInfo({  //获取系统信息成功，将系统窗口的宽高赋给页面的宽高    success: function (res) {  that.width = res.windowWidth  that.height = res.windowHeight  that.setData({  canvasWidth: res.windowWidth * 0.9 * 0.52,  canvasHeight: res.windowWidth * 0.9 * 0.52 * 0.9819,  rightWidth: res.windowWidth * 0.9 * 0.47  })  }  })  },  onReady: function () {  this.drawClock();  // 每40ms执行一次drawClock()，  this.interval = setInterval(this.drawClock, 40);  },  // 所有的canvas属性以及Math.sin,Math.cos()等涉及角度的参数都是用弧度表示  // 时钟  drawClock: function () {  let _this = this;  const ctx = wx.createCanvasContext('clock');  var height = this.height;  var width = this.width;  // 设置文字对应的半径  var R = this.data.canvasWidth / 5;  ctx.save();  // 把原点的位置移动到屏幕中间，及宽的一半，高的一半  ctx.translate(this.data.canvasWidth / 1.83, this.data.canvasHeight / 1.83);  // 画外框  function drawBackground() {  ctx.setStrokeStyle('#4BB5C3');  // 设置线条的粗细，单位px  ctx.setLineWidth(8);  // 开始路径  ctx.beginPath();  // 运动一个圆的路径  // arc(x,y,半径,起始位置，结束位置，false为顺时针运动)  ctx.arc(0, 0, R * 1.7, 0, 2 * Math.PI, false);  ctx.closePath();  // 描出点的路径  ctx.stroke();  };  // 画时钟数  function drawHoursNum() {  ctx.setFontSize(20);  // 圆的起始位置是从3开始的，所以我们从3开始填充数字  var hours = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];  hours.forEach(function (hour, i) {  var rad = (2 * Math.PI / 12) * i;  var x = R * Math.cos(rad);  var y = R * Math.sin(rad);  if (hour == 12) {  ctx.fillText(hour, x - 11, y + 6);  } else if (hour == 6) {  ctx.fillText(hour, x - 5, y + 10);  } else if (hour == 3) {  ctx.fillText(hour, x, y + 8);  } else if (hour == 9) {  ctx.fillText(hour, x - 10, y + 8);  }  else {  //ctx.fillText(hour, x - 6, y + 6);  }  })  };  // 画数字对应的点  function drawdots() {  for (let i = 0; i < 60; i++) {  var rad = 2 * Math.PI / 60 * i;  var x = (R + 15) * Math.cos(rad);  var y = (R + 15) * Math.sin(rad);  ctx.beginPath();  // 每5个点一个比较大  if (i % 5 == 0) {  ctx.arc(x, y, 2, 0, 2 * Math.PI, false);  } else {  // ctx.arc(x, y, 1, 0, 2 * Math.PI, false);  }  ctx.setFillStyle('black');  ctx.fill();  }  ctx.closePath();  }  // 画时针  function drawHour(hour, minute) {  ctx.setStrokeStyle('#000000');  // 保存画之前的状态  ctx.save();  ctx.beginPath();  // 根据小时数确定大的偏移  var rad = 2 * Math.PI / 12 * hour;  // 根据分钟数确定小的偏移  var mrad = 2 * Math.PI / 12 / 60 * minute;  // 做旋转  ctx.rotate(rad + mrad);  ctx.setLineWidth(4);  // 设置线条结束样式为圆  ctx.setLineCap('round');  // 时针向后延伸8个px；  ctx.moveTo(0, 8);  // 一开始的位置指向12点的方向，长度为R/2  ctx.lineTo(0, -R / 2);  ctx.stroke();  ctx.closePath();  // 返回画之前的状态  ctx.restore();  }  // 画分针  function drawMinute(minute, second) {  ctx.save();  ctx.beginPath();  // 根据分钟数确定大的偏移  var rad = 2 * Math.PI / 60 * minute;  // 根据秒数确定小的偏移  var mrad = 2 * Math.PI / 60 / 60 * second;  ctx.rotate(rad + mrad);  // 分针比时针细  ctx.setLineWidth(3);  ctx.setLineCap('round');  ctx.moveTo(0, 10);  // 一开始的位置指向12点的方向，长度为3 * R / 4  ctx.lineTo(0, -3 * R / 4);  ctx.stroke();  ctx.closePath();  ctx.restore();  }  // 画秒针  function drawSecond(second, msecond) {  ctx.save();  ctx.beginPath();  // 根据秒数确定大的偏移  var rad = 2 * Math.PI / 60 * second;  // 1000ms=1s所以这里多除个1000  var mrad = 2 * Math.PI / 60 / 1000 * msecond;  ctx.rotate(rad + mrad);  ctx.setLineWidth(2);  ctx.setStrokeStyle('#4BB5C3');  ctx.setLineCap('round');  ctx.moveTo(0, 12);  ctx.lineTo(0, -R);  ctx.stroke();  ctx.closePath();  ctx.restore();  }  //画出中间那个灰色的圆  function drawDot() {  ctx.beginPath();  ctx.arc(0, 0, 4, 0, 2 * Math.PI, false);  ctx.setFillStyle('#FFF9E6');  ctx.setLineWidth(6);  ctx.setStrokeStyle('#000000');  ctx.stroke();  ctx.fill();  ctx.closePath();  }  //画蒙层  function drawMask() {  ctx.restore();  ctx.rect(0, 0, width * 0.5, _this.data.canvasHeight);  ctx.setFillStyle('rgba(0,0,0,.2)')  ctx.fill()  }  function Clock() {  // 实时获取各个参数  var now = new Date();  var hour = now.getHours();  var minute = now.getMinutes()  var second = now.getSeconds();  var msecond = now.getMilliseconds();  if (_this.data.showMask) {  ctx.scale(0.98,0.98)  }  // 依次执行各个方法  drawBackground();  drawHoursNum();  drawdots();  drawSecond(second, msecond);  drawHour(hour, minute);  drawMinute(minute, second);  drawDot();  if (_this.data.showMask) {  drawMask();  }  ctx.draw();  }  Clock();  },  goCountdown() {  let _this = this;  _this.setData({  showMask: true  })  setTimeout(function () {  _this.setData({  showMask: false  })  wx.navigateTo({  url: '/pages/countdown/countdown',  })  }, 200)  },  touchstart: function (e) {  console.log(e)  this.setData({  showMask: true  })  },  touchend: function (e) {  this.setData({  showMask: false  })  }
})

微信小程序canvas时钟相关推荐

【微信小程序canvas】实现小程序手写板用户签名(附代码)
[微信小程序canvas]实现小程序手写板用户签名(附代码) 工作中公司业务需要的微信小程序用户签字功能先看效果图: wxml <view class="wrapper"& ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
微信小程序canvas简单使用
微信小程序canvas简单使用 index.wxml文件 index.js文件效果图 index.wxml文件 <canvas type="2d" id="can ...
微信小程序canvas实现签名功能
微信小程序canvas实现签名功能在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场文章目录微信小程序canvas实现签名功能前言一.微信小程序canvas实现签 ...
微信小程序Canvas实现手写签名
微信小程序Canvas实现手写签名功能描述点击按钮显示弹窗,弹窗主体为签名板,底部两个按钮为清除和保存. 清除按钮:清空签名板保存按钮:保存签名为图片,并关闭弹窗关键点分析 Canvas实现手 ...
微信小程序Canvas绘图API
微信小程序Canvas绘图API 前言使用姿势常用API(以下API都是通过CanvasContext对象进行调用) 颜色.样式 setFillStyle(string|CanvasGradien ...

微信小程序canvas时钟

微信小程序canvas时钟相关推荐

最新文章

热门文章