在現(xiàn)今的互聯(lián)網(wǎng)時代，Web應(yīng)用越來越普及，能夠提升用戶體驗(yàn)的展示方式也同步更新，javascript的應(yīng)用領(lǐng)域也不斷拓展。手簽畫板便是其中一個極為具有良好用戶體驗(yàn)的應(yīng)用，在很多網(wǎng)站中都有應(yīng)用體現(xiàn)。
手寫畫板的基本概念是通過鼠標(biāo)或觸摸屏幕，讓用戶自由繪畫出各類圖片，并且提供繪圖工具的變化，例如畫筆的粗細(xì)、顏色等。其實(shí)現(xiàn)方式是通過Javascript 控制Canvas進(jìn)行顯示。Canvas是HTML5的新增元素，提供了一個純客戶端方式的繪圖空間，這樣所有的處理都由Javascript來完成，用戶可能會體驗(yàn)到流暢而輕量級的畫效果。
首先我們來看看手簽畫板的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`的元素。這就是我們的畫布實(shí)例，所有的繪圖都應(yīng)該發(fā)生在這個畫布里面。`canvas`的`id`為`myCanvas`，所以我們可以引用`myCanvas`獲取該畫布的一個實(shí)例。
然后我們來寫一下Javascript代碼，來表現(xiàn)基本的手寫畫板功能：
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);通過上述代碼，我們實(shí)現(xiàn)了一個簡化版的手寫畫板，當(dāng)我們在畫布上按下鼠標(biāo)后，就開始畫圖，如果用戶移動鼠標(biāo)，就會繼續(xù)繪制出線條，且線條隨著所在位置HSL色相發(fā)生變化，當(dāng)按下鍵盤或鼠標(biāo)不動時停止繪制。
你會發(fā)現(xiàn)，通過Javascript來掌控HTML5的`canvas`元素，可以在一定程度上實(shí)現(xiàn)類似于Photoshop等桌面應(yīng)用的畫圖體驗(yàn)。而這一實(shí)現(xiàn)，給在線教育、藝術(shù)設(shè)計(jì)等多個領(lǐng)域都帶來了很好的交互，同時也拓展了Javascript的應(yīng)用場景。