我们目前仅仅测试实现了铅笔的功能。接下来我们继续增加一个新的功能：荧光笔。荧光笔通常是带有一定颜色，并且具有半透明特性，可以把下面的字迹显露出来。 而为了在铅笔和荧光笔之间进行切换，我们就需要增加两个按钮，来实现这个切换功能。 代码如下：
<html>
<head>
<meta charset="utf-8">
</head>
<body style='background:lightgrey'>
<div>
<button id='pencil' onclick="handleChoosePencil()">pencil</button>
<button id='highlighter' onclick="handleChooseHighlighter()">highlighter</button>
</div>
<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();
ctx.beginPath();
ctx.moveTo(event.offsetX, event.offsetY);
}
//
function handleMouseUp(event) {
pad.removeEventListener('mousemove', handleMouseMove);
pad.removeEventListener('mouseup', handleMouseUp);
//
}
//
function handleChoosePencil(event) {
ctx.strokeStyle = 'rgb(0, 0, 255)';
ctx.lineWidth = 2;
}
//
function handleChooseHighlighter(event) {
ctx.strokeStyle = 'rgba(255, 255, 0, 0.5)';
ctx.lineWidth = 8;
}
//
</script>
</html>
首先，我们在html里面增加了两个按钮，并且分别绑定了事件。然后在事件响应方法里面，我们去设置画笔的颜色和粗细。其中给荧光笔设置了半透明。 如果我们只做了这一点修改，那么你会发现，荧光笔画出来的颜色一点都不透明。原因在于。我们之前的代码里面，只在handleMouseDown里面调用了一次beginPath，然后让画笔不断移动，然后调用stroke去显示这条路径。结果会导致，每次移动鼠标的时候，调用stroke显示的是从上一次beginPath之后记录的所有的路径，因此，在mouse move的时候，我们会重复绘制多次之前的路径，结果就导致半透明颜色叠加之后变成了不透明。
要解决这个问题，就需要每次移动鼠标，我们就绘制当次鼠标移动的路径，然后开启一个新的路径，这样下次绘制的时候，不会重复绘制之前已经画好的路径。 所以我们也修改了handleMouseDown。 接下来，我们会增加橡皮擦功能。
