小程序模板网

用canvas在微信小程序上画时钟教程

分享者:lastnigtic,原文地址 
推荐阅读:跳坑《一百一十一》canvas相关问题说明 
最近开始学习canvas,看了慕课网的一个视频,开始自己动手在微信小程序上画个时钟,

首先我们可以先看以下微信小程序的官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html

和canvas的手册对比:http://www.w3school.com.cn/tags/html_ref_canvas.asp

我觉得其实除了删减一些内容之外没什么太大的区别

直接贴代码:

wxml

 

  1. <!--index.wxml-->
  2. <view class="container">
  3. <canvas canvas-id="clock"/>
  4. </view>

wxss

 

  1. /**index.wxss**/
  2.  
  3. .container {
  4. height: 100%;
  5. width: 100%;
  6. }
  7.  
  8. canvas {
  9. height: 100%;
  10. width: 100%;
  11. }
  12.  
  13. /*有些人会有疑问为什么设置了100%却没有100%,其实要到app.wxss里设置一下*/
  14. /**app.wxss**/
  15. page{
  16. width:100%;
  17. height:100%;
  18. }

js

 

  1. Page({
  2. data: {
  3. width: 0,
  4. height: 0
  5. },
  6. onLoad: function (options) {
  7. var that = this
  8. //获取系统信息
  9. wx.getSystemInfo({
  10. //获取系统信息成功,将系统窗口的宽高赋给页面的宽高
  11. success: function (res) {
  12. that.width = res.windowWidth
  13. // console.log(that.width) 375
  14. that.height = res.windowHeight
  15. // console.log(that.height) 625
  16. // 这里的单位是PX,实际的手机屏幕有一个Dpr,这里选择iphone,默认Dpr是2
  17. }
  18. })
  19. },
  20.  
  21. onReady: function () {
  22. this.drawClock();
  23. // 每40ms执行一次drawClock(),人眼看来就是流畅的画面
  24. this.interval = setInterval(this.drawClock, 40);
  25. },
  26.  
  27.  
  28. // 所有的canvas属性以及Math.sin,Math.cos()等涉及角度的参数都是用弧度表示
  29. // 时钟
  30. drawClock: function () {
  31. const ctx = wx.createCanvasContext('clock');
  32. var height = this.height;
  33. var width = this.width;
  34. // 设置文字对应的半径
  35. var R = width / 2 - 60;
  36. // 把原点的位置移动到屏幕中间,及宽的一半,高的一半
  37. ctx.translate(width / 2, height / 2);
  38.  
  39. // 画外框
  40. function drawBackground() {
  41. // 设置线条的粗细,单位px
  42. ctx.setLineWidth(8);
  43. // 开始路径
  44. ctx.beginPath();
  45. // 运动一个圆的路径
  46. // arc(x,y,半径,起始位置,结束位置,false为顺时针运动)
  47. ctx.arc(0, 0, width / 2 - 30, 0, 2 * Math.PI, false);
  48. ctx.closePath();
  49. // 描出点的路径
  50. ctx.stroke();
  51. };
  52.  
  53. // 画时钟数
  54. function drawHoursNum() {
  55. ctx.setFontSize(20);
  56. // 圆的起始位置是从3开始的,所以我们从3开始填充数字
  57. var hours = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
  58. hours.forEach(function (hour, i) {
  59. var rad = (2 * Math.PI / 12) * i;
  60. var x = R * Math.cos(rad);
  61. var y = R * Math.sin(rad);
  62. // 因为微信小程序不支持BaseLine这个属性,所以这里我们只能自己手动调整位置
  63. if (hour == 12) {
  64. ctx.fillText(hour, x - 11, y + 6);
  65. } else if (hour == 6) {
  66. ctx.fillText(hour, x - 5, y + 6);
  67. } else {
  68. ctx.fillText(hour, x - 6, y + 6);
  69. }
  70. })
  71. };
  72.  
  73. // 画数字对应的点
  74. function drawdots() {
  75. for (let i = 0; i < 60; i++) {
  76. var rad = 2 * Math.PI / 60 * i;
  77. var x = (R + 15) * Math.cos(rad);


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23360.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询