socket.io 和canvas 实现的共享画板功能
发布时间：2019-05-22 16:21:11 作者：佚名 
我要评论
我要评论这篇文章主要介绍了socket.io 和canvas 实现的共享画板功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
起初只是想要写个简单的画板,后面不知不觉的想起石墨文档有一个白板功能，就想将当前这个画布功能，开发成一个简易版的协作画板。
在线演示：努力部署中，目前需要clone到本地运行。
2、运行
git clone <repository> npm install #>>>对于开发阶段： #前端服务启动（利用webpack dev server）： npm run dev #后台服务启动(使用了nodemon 实时监听后端文件修改重启服务) npm run start #>>>对于生产阶段： #打包前端文件,然后启动服务器即可 1、 npm run build 2、 npm run start
3、功能：
开发完成:
•画布缩放(Done)
•画布颜色(Done)
•画笔颜色(Done)
•画笔粗细(Done)
•历史记录（撤销，恢复）(Done)
•聊天室(Done)
•绘制协作(类似于石墨文档协作)（Done）
待开发的功能：
•UI 界面美化（待开发） •打算使用UI库（material Design）
•文字控件（待开发）
•上传图片，基于图片绘图（待开发）
•绘图带基本形状可拖拽调控大小 （待开发）
• 聊天功能丰富（表情，图片，音视频）（待开发） •webRTC 获取视频流数据，并传输
•其它未知功能（x）
4、效果图
5、后话
这个应用实现的比较基础，还有很大的改进空间。
以上所述是小编给大家介绍的socket.io 和canvas 实现的共享画板功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要介绍了JavaScript+Canvas实现自定义画板的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小2019-05-13
几何画板怎么利用弧绘制三角形折叠？几何画板中想要绘制一个在四边形边上折叠起来的三角形，该怎么制作这个效果呢？下面我们就来看看详细的教程，需要的朋友可以参考下2019-05-09
几何画板怎么制作旋转的正六边形课件？几何画板中想要制作一个课件，让正六边形旋转起来，该怎么实现呢？下面我们就来看看详细的教程，需要的朋友可以参考下2019-05-07
几何画板怎么一只飞舞的蝴蝶动画？几何画板中想要制作一只蝴蝶飞舞的动画效果，该怎么制作这个动画效果呢？下面我们就来看看详细的教程，需要的朋友可以参考下2019-04-23
这篇文章主要介绍了手把手教你实现一个canvas智绘画板的方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面2019-03-04
ai怎么设置画板属性？ai中想要对画板进行设置，该怎么设置画板属性呢？下面我们就来看看ai画板设置属性的教程，需要的朋友可以参考下2019-02-27
金排物理画板2019是一款基于微软Word、方便物理教师制做试题教案课件等的软件，使用本软件您可以将图形图片等添加到WORD工具栏、菜单栏、金排素材库等，打造自己的模板轻而2019-02-25
最新评论