javascript全栈开发实践-web-3

要实现橡皮擦功能，可以有以一些不同的方法：

1. 记住每一次绘制的路径，然后橡皮擦擦除的时候，去计算路径和橡皮擦的位置，然后把他们擦除，或者把一个比较长的路径裁剪成两个（或者多个）比较短的路径。最后用新的路径在canvas上面重新绘制即可。但是这种方式会比较复杂，因为我们不但要记住所有的路径，还需要去通过算法裁剪这些路径。
2. 采用修正液或者涂改带的方式，我们直接用白色的笔，在canvas上面绘制路径即可，让白色的路径覆盖在上面。这样，橡皮擦就变成了一个白色的笔，和铅笔，荧光笔没有什么不同。 在这里我们采用第二种方式实现橡皮擦。代码如下：

...
      <button id='eraser' onclick="handleChooseEraser()">eraser</button>
...
    function handleChooseEraser(event) {
      ctx.strokeStyle = 'white';
      ctx.lineWidth = 8;
    }

很简单，我们就实现了橡皮擦的功能。 在这里，因为我们设置的canvas背景是白色的，所以我们也让橡皮擦变成了白色。如果后面我们要给纸张（canvas）设置背景，例如方格，羊皮纸效果，或者单纯的颜色，我们则需要修改橡皮擦功能，而不能简单的采用白色涂抹上去。