javascript全栈开发实践-web-1

最新推荐文章于 2025-09-09 16:55:30 发布

转载最新推荐文章于 2025-09-09 16:55:30 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cc2e4f9e51d456e5a07294f

文章标签：

#javascript #ViewUI

本文介绍了一种利用HTML5的Canvas元素实现手写笔记功能的方法。通过监听鼠标事件，如mousedown、mousemove和mouseup，可以实时绘制出鼠标轨迹，模拟手写效果。此功能被称为铅笔绘画，适用于全栈开发项目。

要实现手写笔记，首先就是手写。那么我们首先，应该实现一个基本的手写功能。因为要做到全栈开发，那么最简单的方式，就是直接使用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>
复制代码