canvas js 繪圖插件_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);
​
                // 綁定滑鼠移動事件
                document.onmousemove = function(event) {
                    // 設定連接配接點
                    ctx.lineTo(event.clientX - canvasNode.offsetLeft,event.clientY - canvasNode.offsetTop);
                    ctx.stroke();      //描邊
                }
                document.onmouseup = function() {
                    this.onmousemove = null;
            }    
            }
            
        })();           

3.效果圖