小程序Canvas 画刻度

canvas是前端工作中不可少的一部分，那么今天就用小程序的canvas画一次刻度尺，希望大家喜欢，同事有更好意见的，也可以在评论去留言哦！

1、axml

<view>
   <canvas id="canvas" class="canvas" onTouchStart="start" onTouchMove="move" onTouchEnd="end" />
</view>

2、acss

.canvas {
  width: 100%;
  height: 100px;
  margin-top: -25px;
}

3、js

let _this;
let unitLine = 10;
// 中刻度线的长度
let middleUnitLine = 15;
// 长刻度线的长度
let longUnitLine = 20;
// 中间线的长度
let centerLine = 50;
// 刻度的单位
let unit = 1000;
// 刻度的间距
let spacing = 10;
// 最大值
let max = 50000;
// 停止后的值
let sum;
let _arr = []
Page({
  data: {
  },
  //  刻度部分
  onReady() {
    _this = this;
    this.context = my.createCanvasContext('canvas');
    this.x = 0;
    this.a = 0;
    // 获取宽高    
    my.getSystemInfo({
      success: function (res) {