canvas实现涂鸦效果--清屏和保存功能

利用canvas实现涂鸦效果，包括更换笔触大小颜色、换背景图、橡皮檫、历史记录、清屏等功能，并能保存涂鸦图片到本地。

由于篇幅问题，本文主要实现清屏和保存功能，最终效果如下图。

Tips：本文是在《 canvas实现涂鸦效果--基本涂鸦效果》和《canvas实现涂鸦效果--大小颜色背景图》基础上添加功能。

清屏功能

清屏功能比较简单，不需要增加html代码和css样式，只需要增加如下图js代码；原理就是点击清屏按钮（clearButton）时候，清除（clearRect）掉涂鸦画布（ctx）和背景图画布（offCtx）的内容。

保存功能

编写静态样式，只需要增加如下图一行html代码，主要是用于保存涂鸦画布和背景图画布的图片，后面合成于离屏画布。

声明变量和初始化数据，详细代码如下图，基于前面功能声明修改了红色框的数据：

imgSrc设置背景图片地址，也用于判断是否有背景图；

imgArray存储背景图和涂鸦图，用于循环添加到元素img。

分析实现保存功能之前，先需要了解函数saveFile（saveFile），因为canvas没办法直接保存为图片，所以下面的代码利用了模拟鼠标点击事件进行保存，且能自定义文件名。

保存功能实现过程，简单说就是把涂鸦画布和背景图画布的内容合成到另一个画布，然后把该画布内容保存成图片到本地，详细分析如下（点击保存按钮（saveButton）时候）：

首先把涂鸦画布和背景图画布的内容转换成图片存储到数组imgArray；

然后把imgArray传值给函数compositeGraph，该函数首先把数组imgArray内容循环转化成html中元素img的内容（该内容是隐藏的），然后循环该元素img轮流绘画到离屏画布上面，最后把该离屏画布转化成图片并利用函数saveFile保存成图片到本地。

注意：

图片需要使用onload（val.onload），不然图片未准备就执行，会显示空白；

转换离屏画布为图片和执行函数saveFile需要使用定时器，不然也会导致保存空白图片。

注意事项

toDataURL有跨域问题，所以需要发布到服务器上，才能正常使用。