使用Canvas创作一个画板

<style>
        #canv {
            border: 1px solid red;
        }
        
        .box {
            border: 1px solid black;
            padding: 20px;
        }
        
        .box span {
            background-color: gray;
            color: #fff;
            padding: 2px 3px;
        }
    </style>

 <canvas id="canv" width="500" height="500"></canvas>
    <div class="box">
        <button id="clear">清除画布</button>
        <span>线条宽度</span>
        <select name="" id="width">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <span>线条颜色</span>
        <input type="color" name="" id="color">
       
    </div>

<script>
    var canv = document.querySelector("#canv");
    var clear = document.querySelector("#clear");
    var color = document.querySelector("#color");
    var width = document.querySelector("#width");
    var ctx = canv.getContext('2d');

    canv.onmousedown = function() {
        ctx.beginPath();
        statrX = event.clientX;
        statrY = event.clientY;
        // 移动
        ctx.moveTo(statrX, statrY);
        canv.onmousemove = function() {
            // 获取线的颜色 和 粗细
            ctx.strokeStyle = color.value;
            ctx.lineWidth = width.value;

            // 每次移动的位置
            moveX = event.clientX;
            moveY = event.clientY;

            // 绘制
            ctx.lineTo(moveX, moveY);
            ctx.stroke();
        }
    }
    canv.onmouseup = function() {
        canv.onmousemove = null;
        // 设置鼠标悬浮变成空
    }
    clear.onclick = function() {
        // 点击按钮清空画板
        canv.width = '500';
        canv.height = '500';
    }
</script>