基于HTML5的同步手绘板主要功能设计与实现

陈寅川 孙文武 李小勇 杨莉莉 王先传

摘要：随着HTML5技术的快速发展，移动快捷的Web软件将成为今后生活的主流应用形式。文章采用模块化设计思想，使用HTML5的Canvas技术，结合前端的Java Script代码，后端的Thinkphp5框架设计实现了在线同步手绘板，实现了绘画、保存和重现绘图、混色以及油漆桶等主要功能。在线同步手绘板实现了在线绘图，上传绘图，重现绘图过程，同步手绘板等功能，具有使用简单，上手快等优点，为在线使用手绘板学习绘画提供了平台。

关键词：HTML5;Web;PHP;同步手绘板;Canvas

中图分类号：TB472 文献标识码：A

文章编号：1009-3044（2020）21-0069-03

开放科学（资源服务）标识码（0SID）：

1 背景

目前，市场上，绘画学习者使用的绘图学习软件相对比较少，主流的专业绘图软件，如PhotoShop、Adobe image等，这些是单机版的，需要安装到固定的存储媒介之上，而且仅安装文件就有几个GB，下载安装十分烦琐，不能保存绘画的过程。虽然这些软件具有绘画的基本功能，但其功能甚多，入门比较困难，不适用于培养孩子的绘画兴趣。相比于传统的画图软件，本文采用模块化设计思想，使用HTML5的Canvas技术，结合前端的Java Script代码，后端的Thinkphp5框架[1]设计实现了在线同步手绘板，给青少年儿童提供一个可以在线学习绘画的平台，提升他们的绘画兴趣。

2 需求分析

2.1绘画功能

与人类现场绘画类似，手绘板的绘画功能需要有绘画工具、画布等，因此需要实现的绘画功能如下：

1）混色功能，用户可以用工具栏中的取色器取色，然后達到混色的效果。

2）画笔的粗细值和形状，用户可以自行调节画笔的粗细和长度。……