javascript全栈开发实践-web-1要实现手写笔记，首先就是手写。那么我们首先，应该实现一个基本的手写功能。因为

要实现手写笔记，首先就是手写。那么我们首先，应该实现一个基本的手写功能。因为要做到全栈开发，那么最简单的方式，就是直接使用html里面的canvas和svg。其中canvas方式灵活简单，而svg则要稍微麻烦一些，并且在数据量比较多的时候，会有一些效率问题，因此我们会采用canvas方式来显示手写内容。

首先，我们先在一个基本的html里面，添加一个canvas，然后用鼠标或者手写笔，可以在上面显示出轨迹。

首先，我们先在磁盘上面建立一个文件夹，命名为HandwrittenNotes。然后在里面建立一个子文件夹，叫做html。然后启动Visual Studio Code，点击菜单，打开文件夹html。我们新建一个test.html文件，输入以下内容：

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body style='background:lightgrey'>
    <canvas id='pad' width='800px' height='600px' style='background:white'></canvas>
  </body>
  <script>
    const pad = document.getElementById('pad');
    const ctx = pad.getContext('2d');
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'blue';
    //
    pad.addEventListener('mousedown', handleMouseDown);
    //
    function handleMouseDown(event) {
      //
      ctx.beginPath();
      ctx.moveTo(event.offsetX, event.offsetY);
      //
      pad.addEventListener('mousemove', handleMouseMove);
      pad.addEventListener('mouseup', handleMouseUp);
    }
    //
    function handleMouseMove(event) {
      ctx.lineTo(event.offsetX, event.offsetY);
      ctx.stroke();
    }
    //
    function handleMouseUp(event) {
      pad.removeEventListener('mousemove', handleMouseMove);
      pad.removeEventListener('mouseup', handleMouseUp);
    }
    //
  </script>
</html>

然后在浏览器内打开这个html，就可以用鼠标在白色区域画画了。

代码很简单，演示了如何使用canvas并且捕获鼠标消息进行绘画。我们暂且把这个功能叫做铅笔绘画功能。因为只能用同样的颜色，粗细来绘制鼠标轨迹。