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 相关文章推荐
需要知道的CSS3动画技术
Jan 01 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
宠物店的创业计划书范文
2014/01/11 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
南京南京观后感
2015/06/02 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python