console 命令行工具 X clear

console

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, minimal-ui">
    <title>TimeScale</title>
</head>
<style>
    #canvas {
        width: 300px;
        height: 120px;
    }
</style>
<body>
<canvas id='canvas'></canvas>
<script src='https://cdn.bootcss.com/jquery/3.3.0/jquery.js'></script>
<script type="text/javascript">
    var ctx = document.getElementById("canvas").getContext("2d");
    var div = document.getElementById("canvas");
    var startX, startY, endX, endY, moveX, moveY, allY = 0, returnFlag;
    var c = ctx;
    var w = 300;
    $('#canvas').on('touchstart', function (event) {
        var touch = event.targetTouches[0];
        startX = touch.pageX;
        startY = touch.pageY;
    });
    $('#canvas').on('touchmove', function (event) {
        var touch = event.targetTouches[0];
        event.stopPropagation();
        endX = touch.pageX;
        endY = touch.pageY;
        moveY = endY - startY;
        returnFlag = true;
        moveRule(moveY);
    })
    function moveRule(Y) {
        allY += Y;
        if (allY > 120 && allY < 130) {
            returnFlag = false;
            allY = 120;
        }
        if (allY >= 120) {
            return;
        }
        if (!returnFlag) {
            return;
        }
        ctx.clearRect(0, 0, 310, 160);
        initRound();
        initArrow("canvas", 0, 0, 140, 20, 140, 90);
        initScale(allY);
    }

    initRound();
    initArrow("canvas", 0, 0, 140, 20, 140, 90);
    initScale(-20);
    initModal();
    function initRound() {
        ctx.beginPath();
        ctx.arc(140, 20, 5, 0, Math.PI * 2, false);
        ctx.fillStyle = "#000";
        ctx.fill();
        ctx.stroke();
    }

    function initArrow(canId, ox, oy, x1, y1, x2, y2) {
        var sta = new Array(x1, y1);
        var end = new Array(x2, y2);
        var canvas = document.getElementById(canId);
        if (canvas == null)return false;
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.translate(ox, oy, 0); //坐标源点
        ctx.moveTo(sta[0], sta[1]);
        ctx.lineTo(end[0], end[1]);
        ctx.fill();
        ctx.stroke();
        ctx.save();
        ctx.translate(end[0], end[1]);
        var ang = (end[0] - sta[0]) / (end[1] - sta[1]);
        ang = Math.atan(ang);
        if (end[1] - sta[1] >= 0) {
            ctx.rotate(-ang);
        } else {
            ctx.rotate(Math.PI - ang);//加个180度，反过来
        }
        ctx.lineTo(-5, -10);
        ctx.lineTo(0, -5);
        ctx.lineTo(5, -10);
        ctx.lineTo(0, 0);
        ctx.fill();
        ctx.restore();
        ctx.stroke();
        ctx.closePath();
    }

    function initScale(Y) {
        var tickSize = 10; //刻度大小
//                    var tickCnt = Math.ceil((w - 20 ) / tickSize); //共多少份
        var tickCnt = 200; //共多少份
        c.moveTo(0, 90); //横线起点
        c.lineTo(w, 90); //横线终点
        for (var i = 0; i < tickCnt - 2; i++) {
            c.moveTo(20 + tickSize * i + Y, i % 5 == 0 ? 75 : 80);
            c.lineTo(20 + tickSize * i + Y, 90);
            c.fillText('', 20 + tickSize * i + Y, 70);
        }
        c.stroke();
        c.closePath();
    }

    function initModal() {
        ctx.beginPath();
        var my_gradient = ctx.createLinearGradient(0, 0, 300, 0);
        my_gradient.addColorStop(0, "rgba(255,255,255,0.6)");
        my_gradient.addColorStop(0.2, "rgba(255,255,255,0)");
        my_gradient.addColorStop(0.8, "rgba(255,255,255,0)");
        my_gradient.addColorStop(1, "rgba(255,255,255,0.6)");
        ctx.fillStyle = my_gradient;
        ctx.fill();
        ctx.stroke();
    }
</script>
</body>
</html>

   #canvas {
        width: 300px;
        height: 120px;
    }