socket.io 和canvas 实现的共享画板功能


Posted in HTML / CSS onMay 22, 2019

起初只是想要写个简单的画板,后面不知不觉的想起石墨文档有一个白板功能,就想将当前这个画布功能,开发成一个简易版的协作画板。

在线演示:努力部署中,目前需要clone到本地运行。

git 地址

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、效果图

socket.io 和canvas 实现的共享画板功能

socket.io 和canvas 实现的共享画板功能 

5、后话

这个应用实现的比较基础,还有很大的改进空间。

以上所述是小编给大家介绍的socket.io 和canvas 实现的共享画板功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 #HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 #HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 #HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 #HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 #HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 #HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 #HTML / CSS
You might like
php删除数组元素示例分享
2014/02/17 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
js用图作提交按钮或超连接
2008/03/26 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
python读写ini配置文件方法实例分析
2015/06/30 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
详解python3中的真值测试
2018/08/13 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
电力安全事故反思
2014/04/27 职场文书
药剂专业自荐书
2014/06/20 职场文书
仲裁协议书
2014/09/26 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
python基础之爬虫入门
2021/05/10 Python
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers