36行代码实现网页手写板特效(可写字)

<canvas id="canvas" width="666" height="444" style="border:1px solid #ccc;"></canvas>
<script type="text/javascript">
// 获取画布和上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 设置画笔颜色和粗细
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
// 定义变量
var isDrawing = false; // 是否在绘制中
var lastX = 0; // 上一个点的x坐标
var lastY = 0; // 上一个点的y坐标
// 添加鼠标事件监听器
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
// 开始绘制
function startDrawing(e) {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
}
// 绘制过程
function draw(e) {
  if (!isDrawing) return;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
}
// 停止绘制
function stopDrawing() {
  isDrawing = false;
}
</script>

这段代码通过Canvas API实现了一个简单的手写板特效，用户可以在画布上使用鼠标绘制出自己想要的图形。具体来说，该代码主要实现了以下功能：

在页面中创建一个大小为500x500像素的Canvas元素。

获取该Canvas元素的2D上下文，并设置画笔颜色和粗细。

监听鼠标事件，并根据事件的类型执行不同的操作。

在鼠标按下时开始绘制，记录下当前点的坐标。

在鼠标移动时，根据当前点和上一个点的坐标绘制一条直线，并更新上一个点的坐标。

在鼠标抬起或离开画布时停止绘制。

这段代码是一个非常简单的手写板实现，如果您需要更加完整的手写板功能，还需要考虑更多的交互细节，例如撤销、清空、保存等功能。