canvas 实现一个签名板

1.HTML及css样式

<canvas id="myCanvas">
        您的浏览器不支持canvas，请升级！
    </canvas>
    

 <style>
        canvas{
            display: block;
            margin: 20px auto;
            background: gray;
        }
    </style>

2.js代码

<script>
        (function(){
            // 获取canvas元素
            var canvasNode  = document.querySelector("#myCanvas");
            // 设置画布宽高
            canvasNode.width = 800;
            canvasNode.height = 600;


            // 获取绘图上下文
            var ctx = canvasNode.getContext('2d');
            ctx.lineWidth = 2;
           
            //绑定鼠标按下事件
            canvasNode.onmousedown = function(event) {
                // 开启路径
                ctx.beginPath();
                // 设置起始点
                ctx.moveTo(event.offsetX,event.offsetY);

                // 绑定鼠