canvas实现涂鸦效果--大小颜色背景图

深藏阁楼爱情的钟 2022-02-26 00:42 346阅读 0赞

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

由于篇幅问题，本文主要实现更换笔触大小颜色和换背景图功能，最终效果如下图。

Tips：本文是在《 canvas实现涂鸦效果--基本涂鸦效果》基础上添加功能，基础功能可参考上面文章（修改了一处地方drawLine(ctx, lastCoordinate.x, lastCoordinate.y, curCoordinate.x, curCoordinate.y, curLineWidth, strokeColor);）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70][]

# #

## 编写静态页面 ##

html代码和css样式如下图，这一块比较简单，也不是本文重点，可自行查看；颜色、大小和背景弹出框效果分别如最后三个图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3][]

![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][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 6][]

### 实现原理 ###

声明变量和初始化数据，详细代码如下图，基于基本功能声明增加了红色框的数据，主要分析两点：

strokeColor设置默认笔触的颜色，跟首页导航栏底部显示的文字对应。

imgSrc存储背景图片地址，用于绘制图片到画布。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 7][]

添加阻止拖动函数，详细代码如下图；因为H5在手机滑动页面时候，页面会被拖动，导致跟手指涂鸦冲突，体验不好，所以需要增加该函数，阻止页面被拖动。

![20190328162229232.jpg][]

添加底部按钮和弹出列表的交互效果（代码如下图），为了提高交互体验，使用了animate、setTimeout和slideUp\\Down，并写成一个函数，便于多处调用（animatePanel），代码主要意思就是先向下隐藏设置的栏目然后再向上显示需要的栏目。

animatePanel函数上面部分的代码，实现了点击颜色按钮、大小按钮和背景图按钮弹出相应的列表，且应用了animatePanel函数的动态效果；同时也实现了点击关闭按钮关闭相应的弹出框。

Tips：里面的数字60px是底部操作栏的高度，130px是颜色、大小和背景弹出框的高度，可根据实际情况修改。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 8][]

实现可更换笔触颜色和大小的功能，详细代码如下图：

查看代码可看出滑动过程中会调用函数drawLine，且函数有参数curLineWidth（笔触大小）和strokeColor（笔触颜色），所以只需要选择颜色和大小的时候，替换这两个参数的值就可以实现功能，选择对应的值就是（sizeWidth（用于计算）和strokeColor）；

为了便于用户知道选择了什么颜色和那个大小，也实现了选择回填；

最后实现了点击后关闭弹出框显示操作栏。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 9][]

实现可更换背景图功能，详细代码如下图：

实现原理就是利用点击背景图列表的图片获取src，然后使用canvas的drawImage功能，把图片绘画到offCtx（该画布是处于涂鸦画布的下面），从而实现更换背景图功能。

Tips：背景图列表的图片可改为缩略图加上描述名称有利于体验；绘画新背景之前一定要清除画布（clearRect），不然性能会有问题。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 10][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70]: /images/20220226/974dbe8302164c10a7ca0ec931dd8af2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1]: /images/20220226/69f46481d0864642a881533ce5c9cf36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2]: /images/20220226/8eec4758f9394c1eb95b5083c4025a5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3]: /images/20220226/8a743c4f54cc44e7b56ad8e61dc8e852.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4]: /images/20220226/12de5fc1b2854c6ba60497a562d06ffa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5]: /images/20220226/ee26472d0de44be4880dbad2516e666e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 6]: /images/20220226/b5584720c9844a25811cbebba6769bed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 7]: /images/20220226/9668e61682694dc7ae412abe0eb16e77.png
[20190328162229232.jpg]: /images/20220226/f44800f385cf4e3c91e2e972ac12abd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 8]: /images/20220226/6ca2338e1a6341c1bd78fc0750fbcfd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 9]: /images/20220226/606e27ee674f4bb0966e232653b5383f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 10]: /images/20220226/52ad12c26c4e4cd39d846c0edf659ae4.png