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技术:让你的名字动起来
Apr 27 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
css3应用示例:新增的选择器
Mar 16 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创建sprite
2014/02/11 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
Pandas中resample方法详解
2019/07/02 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
python动态视频下载器的实现方法
2019/09/16 Python
什么是python类属性
2020/06/10 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
文案策划求职信
2014/03/18 职场文书
三方协议书范本
2014/04/22 职场文书
党员领导干部承诺书
2014/05/28 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android