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

分手后的思念是犯贱 2022-02-27 01:17 689阅读 0赞

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

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

### 编写静态页面 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1][]

![20190326143037369.jpg][]

### 实现原理 ###

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2][]

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3][]

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

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

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

![20190326143626533.jpg][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5][]

### 注意事项 ###

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70]: /images/20220227/06c321d291a94957badf6c953add0a1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1]: /images/20220227/d4317cc8780b40d0817805b3d29b3b4a.png
[20190326143037369.jpg]: /images/20220227/dd1a703313884f3bad9eb428a6f12e75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2]: /images/20220227/35e5c384ef2144a6b2e04318b2f058ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3]: /images/20220227/4f7431de044b48ee900806ab590f8ef3.png
[20190326143626533.jpg]: /images/20220227/d9e93c0b2e2341b5b0040c2bee88d09e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4]: /images/20220227/72bb82f5ea8048c7ad74799cdeeb9ffb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5]: /images/20220227/5acda04fad744630871b04cc3eae3066.png
[https_jingyan.baidu.com_article_fa4125ac22623d28ac7092de.html]: https://jingyan.baidu.com/article/fa4125ac22623d28ac7092de.html