canvas实现涂鸦效果--基本涂鸦效果

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

由于篇幅问题，本文主要实现基本涂鸦效果。

编写静态页面

html代码和css样式如下图，这一块比较简单，也不是本文重点，可自行查看，最后效果如图1。

 

实现原理

声明变量和初始化数据，详细代码如下图，具体用途说明都已经有备注，主要分析两点：

1.offCanvas用于更换背景图的画布，所以宽高跟涂鸦画布（canvas）一致，默认空白；

2.背景图画布（offCanvas）和涂鸦画布（canvas）的高度都需要减去footerHeight，避免被底部操作栏遮住。

分析实现涂鸦画布过程之前，先分析三个基本函数，详细代码如下图：

1.caleLineWidth根据不同速度计算线的宽度函数，因为涂鸦过程速度快慢会影响线的宽度，为了更逼真，增加该函数，可根据实际情况对里面数据进行修改；

2.calcDistance计算两点之间的距离函数，这个是用于caleLineWidth（距离/时间），一个简单的两点计算公式（两边长平方后相加再开方）；

3.windowToCanvas坐标转换函数，屏幕坐标转换为在画布上面的坐标，不然画出来的线会有偏移；其实该实例是满屏（width: 100%），是可以不用转换，主要是为了给不是满屏时候用的。

涂鸦实现过程，简单说就是记录触摸时的坐标和滑动时的坐标，然后利用这两个坐标进行画线，从而实现涂鸦效果，详细分析如下：

第一步（图1），触摸时候记录触摸时坐标并转换为（windowToCanvas函数）canvas的坐标（lastCoordinate），并且保存当前的时间戳（lastTimestamp）；

第二步（图2、3），滑动时记录滑动到的坐标并转换为canvas坐标（curCoordinate），并且保存当前的时间戳（curTimestamp）;再把lastCoordinate作为开始坐标，curCoordinate作为结束坐标进行画线（drawLine函数），并把curCoordinate赋值给lastCoordinate，curTimestamp赋值给lastTimestamp；所以滑动时候，都是起始点--第一点--第二点--...--最后结束的点，这样两点两点画线，从而产生滑动过程中的一条线，比较符合实际情况，直接计算起始点--结束点的线是不符合实际情况；最后为了符合慢的时候笔触比较大，快的时候笔触比较小，利用了函数curLineWidth进行即时计算，里面的数值可以自己根据实际情况调节。

注意事项

由于该实例是用于手机端，所以使用触摸事件，如果要用于PC端，改为点击事件即可，但要注意增加判断点击后才能涂鸦，不然会导致未点击就能涂鸦。

Tips：更多详细例子可查看网址“https://jingyan.baidu.com/article/fa4125ac22623d28ac7092de.html”。