Canvas搞个涂鸦板玩玩吧

Canvas搞个涂鸦板玩玩吧

先看一下成品图。这里因为主题的问题下面被截断了一点，但是原来的主题实在不好看，所以就将就一下吧。因为接下来的功能都是得在能涂鸦的情况下实现，所以最开始就得先实现这个最基础的功能啦。

在开始之前，首先得明确一下，canvas是如何做这个绘画的功能的呢？我们知道，当我们开始画图的时候，实际上会触发很多DOM事件。而canvas根据这些事件会更新绘制的图形。所以说，canvas做绘画实际上是通过一系列的DOM操作来实现的。

然后我们需要知道canvas内部是怎么样来做这些事情的。canvas实际上是在自己内部维护了一个画布，然后当我们触发绘画事件的时候，canvas就会往这个画布上画东西。那么这个画布是什么呢？实际上，我们可以通过canvas.getContext()来获取这个画布。

获取到画布之后，就可以通过canvas.getContext()来获取绘图上下文。绘图上下文提供了很多方法，我们可以通过这些方法来在画布上进行绘画。

例如，我们可以通过canvas.getContext().fillStyle来设置画笔的颜色，通过canvas.getContext().strokeStyle来设置画笔的样式，通过canvas.getContext().lineWidth来设置画笔的宽度，通过canvas.getContext().beginPath()来开始一个新的路径，通过canvas.getContext().moveTo()来移动画笔的位置，通过canvas.getContext().lineTo()来在画布上绘制一条线，通过canvas.getContext().stroke()来对路径进行描边，通过canvas.getContext().fill()来对路径进行填充。

除了线条之外，我们还可以通过canvas.getContext().fillRect()来绘制矩形，通过canvas.getContext().fillText()来绘制文本。

当我们想擦除画布上的内容时，可以通过canvas.getContext().clearRect()来清除指定的区域。

这些都是canvas最基本的操作，掌握了这些操作，就可以实现简单的绘画功能了。

在实现涂鸦板之前，我们还需要了解一下canvas的事件。canvas提供了很多事件，比如click，mousedown，mousemove，mouseup等等。我们可以通过监听这些事件来实现涂鸦板的功能。

当用户点击画布的时候，触发click事件。我们可以通过这个事件来获取用户点击的位置，然后在画布上绘制一个点。

当用户按下鼠标的时候，触发mousedown事件。我们可以通过这个事件来获取用户按下的位置，然后开始一个新的路径。

当用户移动鼠标的时候，触发mousemove事件。我们可以通过这个事件来获取用户移动的位置，然后将当前位置与上一个位置连接起来，形成一条线。

当用户抬起鼠标的时候，触发mouseup事件。我们可以通过这个事件来结束当前的路径，然后将路径进行描边或者填充。

通过监听这些事件，就可以实现简单的涂鸦板功能了。当然，这里只是最简单的实现，还可以做很多扩展，比如实现橡皮擦功能，实现多种颜色选择，实现多种画笔样式选择等等。