javascript全栈开发实践-web-1

ゝ一世哀愁。 2022-01-12 04:31 218阅读 0赞

要实现手写笔记，首先就是手写。那么我们首先，应该实现一个基本的手写功能。因为要做到全栈开发，那么最简单的方式，就是直接使用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并且捕获鼠标消息进行绘画。我们暂且把这个功能叫做铅笔绘画功能。因为只能用同样的颜色，粗细来绘制鼠标轨迹。

转载于:https://juejin.im/post/5cc2e4f9e51d456e5a07294f