https://codepen.io/bb798sky/pen/KKwyJBM

    1. <!doctype html>
    2. <html>
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>Drawing App</title>
    7.   <style>
    8.     canvas {
    9.       background: rgb(247, 247, 223);
    10.     }
    11.   </style>
    12. </head>
    14. <body>
    15.   <canvas id="canvas" width="400" height="400"></canvas>
    16.   <script src="./utils.js"></script>
    17.   <script>
    18.     window.onload = function () {
    19.       var canvas = document.getElementById('canvas'),
    20.         context = canvas.getContext('2d'),
    21.         mouse = utils.captureMouse(canvas);
    22.         /**
    23.          * 鼠标按下开始路径，
    24.          * 画笔落到当前光标位置，
    25.          * 监听鼠标移动事件，
    26.          * 鼠标拖动执行onMouseMove方法绘制路径
    27.          */
    28.       canvas.addEventListener('mousedown', function () {
    29.         context.beginPath();
    30.         context.moveTo(mouse.x, mouse.y);
    31.         canvas.addEventListener('mousemove', onMouseMove, false);
    32.       }, false);
    33.       /**
    34.        * 鼠标抬起移除对鼠标滑动的监听
    35.        */
    36.       canvas.addEventListener('mouseup', function () {
    37.         canvas.removeEventListener('mousemove', onMouseMove, false);
    38.       }, false);
    39.       function onMouseMove() {
    40.         context.lineTo(mouse.x, mouse.y);
    41.         context.stroke();
    42.       }
    43.     };
    44.   </script>
    45. </body>
    46. </html>