js画布--手写板

body内容

   <div>
        选择画笔粗细：
        <select name="" id="">
        <option >1px</option>
        <option >3px</option>
        <option >5px</option>
    </select> 选择画笔颜色：
        <input type="color">
        <br>
        <canvas width="1000" height="600"></canvas>
    </div>

js内容

var sel = document.querySelector('select');
        var opt = sel.querySelectorAll('option');
        var ipt = document.querySelector('input');

        var hua = document.querySelector('canvas');
        var huaban = hua.getContext('2d');


        hua.onmousedown = function(e) {
            e = e || window.event;
            huaban.beginPath();
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            huaban.moveTo(x, y);
            hua.onmousemove = function(e) {
                e = e || window.event;
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;

                huaban.lineTo(x, y);
                huaban.stroke();
            };
        }

        document.onmouseup = function() {
            hua.onmousemove = null;
        };
        //修改画笔宽度
        sel.onchange = function() {
            // console.log(sel.value.charAt(0));
            huaban.lineWidth = sel.value.charAt(0);
        };
        //修改颜色
        // console.log(ipt.value);
        ipt.onchange = function() {
            // huaban.beginPath();
            huaban.strokeStyle = ipt.value;
        }

moveTo()  设置起点  放在按下事件里

lineTo（）  设置重点   放在移动事件里

input框变化用chang方法更为适合