console 命令行工具 X clear

console

// 获取元素
var canvas = document.getElementById('canvas')

// 画板大小
canvas.width = 280
canvas.height = 280

// 平面绘图
var context = canvas.getContext('2d')

// 背景颜色
context.fillStyle = 'black'
context.fillRect(0, 0, canvas.width, canvas.height)

// 线宽提示
var range = document.getElementById('customRange1')
range.oninput = function () {
    this.title = 'lineWidth: ' + this.value
}

// 定义坐标
var start_x, start_y, move_x, move_y, end_x, end_y

// 按下手指
canvas.ontouchstart = function (e) {
    start_x = e.touches[0].pageX - this.offsetLeft
    start_y = e.touches[0].pageY - this.offsetTop
    context.lineWidth = range.value
    context.lineJoin = 'round'
    context.lineCap = 'round'
    context.strokeStyle = 'white'
    context.beginPath()
    context.moveTo(start_x, start_y)
}

// 移动手指
canvas.ontouchmove = function (e) {
    move_x = e.touches[0].pageX - this.offsetLeft
    move_y = e.touches[0].pageY - this.offsetTop
    context.lineTo(move_x, move_y)
    context.stroke()
}

// 松开手指
canvas.ontouchend = function (e) {
    end_x = e.changedTouches[0].pageX - this.offsetLeft
    end_y = e.changedTouches[0].pageY - this.offsetTop
    context.closePath();
}

// 下载图片
var downl = document.getElementById('downl')
downl.onclick = function () {
    var canvas = document.getElementById('canvas')
    var a = document.createElement('a')
    a.download = 'canvas'
    a.href = canvas.toDataURL('image/jpeg')
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

// 清空画布
var clean = document.getElementById('clean')
clean.onclick = function () {
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.fillStyle = 'black'
    context.fillRect(0, 0, canvas.width, canvas.height)
}

<!DOCTYPE html>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container text-center mt-5 pt-5">
        <div>
            <input type="range" min="0" max="20" step="1" class="custom-range" id="customRange1" style="width: 200px">
        </div>
        <div class="my-3">
            <canvas id="canvas" class="img-thumbnail"></canvas>
        </div>
        <div>
            <button class="btn btn-success" id="downl">下载</button>
            <button class="btn btn-warning" id="clean">清空</button>
        </div>
    </div>
    <!--My JS-->
    <script src="index.js"></script>
    <!--Bootstrap JS-->
    <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>