javascript 手签画板

在现今的互联网时代，Web应用越来越普及，能够提升用户体验的展示方式也同步更新，javascript的应用领域也不断拓展。手签画板便是其中一个极为具有良好用户体验的应用，在很多网站中都有应用体现。

手写画板的基本概念是通过鼠标或触摸屏幕，让用户自由绘画出各类图片，并且提供绘图工具的变化，例如画笔的粗细、颜色等。其实现方式是通过Javascript 控制Canvas进行显示。Canvas是HTML5的新增元素，提供了一个纯客户端方式的绘图空间，这样所有的处理都由Javascript来完成，用户可能会体验到流畅而轻量级的画效果。

首先我们来看看手签画板的HTML板块：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Draw</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
</body>
</html>

需要注意的是，在这段HTML的底部，有一个`canvas`的元素。这就是我们的画布实例，所有的绘图都应该发生在这个画布里面。`canvas`的`id`为`myCanvas`，所以我们可以引用`myCanvas`获取该画布的一个实例。

然后我们来写一下Javascript代码，来表现基本的手写画板功能：

const canvas = document.querySelector('#myCanvas');
const context = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 0;
function draw(e) {
if (!isDrawing) return;
context.strokeStyle = `hsl(${hue}, 100%, 50%)`;
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(e.offsetX, e.offsetY);
context.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
hue++;
}
canvas.addEventListener('mousedown', (e) =>{
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () =>isDrawing = false);
canvas.addEventListener('mouseout', () =>isDrawing = false);

通过上述代码，我们实现了一个简化版的手写画板，当我们在画布上按下鼠标后，就开始画图，如果用户移动鼠标，就会继续绘制出线条，且线条随着所在位置HSL色相发生变化，当按下键盘或鼠标不动时停止绘制。

你会发现，通过Javascript来掌控HTML5的`canvas`元素，可以在一定程度上实现类似于Photoshop等桌面应用的画图体验。而这一实现，给在线教育、艺术设计等多个领域都带来了很好的交互，同时也拓展了Javascript的应用场景。