网页签名

canvas实现网页签名及转图片与下载

        let cxt = canvas.getContext("2d")
        function remove() {
            canvas.removeEventListener('mousemove', move)
        }
        function move(e) {
                cxt.moveTo(x-canvas.getBoundingClientRect().x,y-canvas.getBoundingClientRect().y)
                cxt.lineTo(e.clientX-canvas.getBoundingClientRect().x, e.clientY-canvas.getBoundingClientRect().y)
                cxt.stroke()
                // x,y要不停更新 否则会出现始终从mosedown那个点开始画
                x = e.clientX
                y = e.clientY
            }
        let x,y
        function draw(e) {
            canvas.addEventListener('mousemove',move)
            x = e.clientX
            y = e.clientY
            canvas.addEventListener('mouseup', function() {
                canvas.removeEventListener('mousemove',move)
            })
        }
        // 转图片 data URI及利用a标签的download下载 
        function zhuan() {
            img.src=canvas.toDataURL("image/png")
            a.href=img.src
        }