canvas在刻度直尺上实现可拖动的时间指针效果

效果图：

html代码：

 <style>
   .line-wrapper {
        width: 700px;
        position: relative;
        margin: 10px 0;
    }
    .line {
        position: absolute;
        padding-left: 5px;
        height: 120px;
        top: 0;
        cursor: ew-resize;
        left: 0;
        border-left: 1px solid #f00;
    }
</style>

<div class="line-wrapper">
  <canvas class="canvas-ruler" id="canvasRuler"></canvas>
  <div class="line" id="canvasLine"></div>
</div>
<div id="timeValue"></div>

思路： 用canvas实现画刻度线和文字，然后添加直线的拖动监听事件

<script type="text/javascript">
    const canvas = document.getElementById('canvasRuler');
    canvas['width'] = canvas.parentNode.clientWidth;
    canvas['height'] = canvas.parentNode.clientHeight;
    let step = 5;

    defineRulers(canvas,step);


    function defineRulers(canvas, step) {

        const ctx = canvas.getContext('2d');
        let _this = '';

        function Ruler(props){
            this.step = step || 5 // 步进
            this.width = props.width || 1000
            this.color = props.color || '#686868'
            this.seg = Math.floor(this.width / this.step) // 刻度段数
        }
        Ruler.prototype.draw = function(ctx) {
            _this = this;
            ctx.fillStyle = this.color
            ctx.strokeStyle = this.color
            ctx.lineWidth = 1
            ctx.beginPath()
            for (let i = 0; i < this.width; i += this.step) {
                ctx.moveTo(i, 0)
                if (i % this.step == 0) {
                    if (i % (this.step * 10) == 0) {
                        ctx.lineTo(i, 20)
                    } else {
                        ctx.lineTo(i, 10)
                    }
                }
            }
            ctx.closePath()
            ctx.stroke()
        }
        Ruler.prototype.drawText = function(ctx) {
            //添加体重数字
            ctx.beginPath();
            ctx.font = "14px Arial";
            ctx.fillStyle =  "#333";
            ctx.textAlign = "left";
            ctx.textBaseline = "middle";
            console.log(this.step,this.width)
            for (let i = 0; i < this.width; i += this.step) {
                ctx.moveTo(i, 0)
                if (i % this.step == 0) {
                    if (i % (this.step * 10) == 0) {
                        ctx.fillText(i/(step * 10) + 's',i,32);
                    }
                }
            }
            ctx.closePath()
            ctx.stroke()
        }
        const ruler = new Ruler({
            width: canvas.width
        })
        ruler.draw(ctx)
        ruler.drawText(ctx)
    }



    const line = document.getElementById('canvasLine');
    let offsetLeft = line.offsetLeft;
    let startX = 0;
    const mouseDownHandler = function(e) {
        startX = e.x;
        document.addEventListener('mousemove', mouseMoveHandler)
    }
    const mouseUpHandler = function(e) {
        document.removeEventListener('mousemove', mouseMoveHandler);
        document.removeEventListener('mouseup', mouseUpHandler);
        offsetLeft = line.offsetLeft;
    }
    const mouseMoveHandler = function(e) {
        let leftPx = offsetLeft + e.x - startX;
        if(leftPx > canvas['width']){
            leftPx = canvas['width'];
        }
        if(leftPx <= 0){
            leftPx = 0;
        }
        line.style.left =leftPx + 'px';
        document.getElementById('timeValue').innerHTML = leftPx / (step * 10);
        document.addEventListener('mouseup', mouseUpHandler)
    }
    line.addEventListener('mousedown', mouseDownHandler);
</script>