结合使用Canvas API与History API——模拟绘图

        大家都对画图软件不陌生吧，可以在画布上随意涂鸦、绘画，还可以为你画的每一步进行撤销和恢复。今天正好得空，便结合Canvas API 与History API做了一个模拟绘图的示例，当然，这里面我主要讲的还是history API的使用。下面的实例中显示一个canvas元素，用户可以在该元素中随意使用鼠标书写文字或绘制图画，当用户单击一次或连续单击浏览器的后退按钮时，可以撤销当前书写或绘制的最后一笔或多笔，当用户单击或连续单击浏览器的前进按钮时，可以重绘当前书写或绘制的最后一笔或多笔。好了，废话不多说，跟我一起动手做做吧！

1.Html代码及样式

页面中的img元素加载的是一个黑色小圆点图片，这里作为绘图用的笔刷。当用户在canvas元素中按下并连续拖动鼠标左键时，按照用户拖动的轨迹连续绘制该黑色小圆点，这样处理之后会在浏览器中显示用户书写文字或绘制图画时所绘制的每一笔。

2.javascript脚本代码

A)  首先要获取页面canvas元素，img元素，引用canvas上下文context对象，以及用于控制是否继续进行绘制操作的布尔值变量isDrawing，当isDrawing的值为true时代表用户已按下鼠标左键，可以继续绘制，当该值为false时表示用户已松开鼠标左键，停止绘制。

B)  接下来屏蔽用户在canvas元素中通过按下鼠标左键、以手指或书写笔触发的pointerdown事件(pointerdown事件属于一种touch event事件)

C)  然后，监听用户在canvas元素中按下鼠标左键时触发的mousedown事件，并将事件处理函数指定为startDrawing函数；监听用户在canvas元素中移动鼠标时触发的mousemove事件，并将事件处理函数指定为draw函数；监听用户在canvas元素中松开鼠标左键时触发的mouseup事件，并将事件处理函数指定为stopDrawing函数；监听用户单击浏览器的后退按钮或前进按钮时触发的popstate事件，并将事件处理函数指定为loadState函数。代码如下：

  

  

  

        写到这里，简单的绘制功能已经完成，不过该页面还是存在一个问题，即当用户在canvas元素中绘制了多笔之后，重新在浏览器的地址栏中输入页面地址(这时浏览器中的canvas元素显示空白图像)，/然后绘制第一笔，之后再单击浏览器的后退按钮时，canvas元素中并不显示空白图像，而是直接显示输入页面地址之前的绘制图像，这样看起来浏览器中的历史纪录并不连贯，因为canvas元素中缺少了一副空白图像。为了修正这个问题，我们在页面打开时就将canvas元素中的空白图像保存在历史记录中，所以有了以下两行代码。