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进度条效果
Feb 22 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 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
终于听上了直流胆调频
2021/03/02 无线电
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
PHP Socket 编程
2010/04/09 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python Flask基础教程示例代码
2018/02/07 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
django orm模块中的 is_delete用法
2020/05/20 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
优秀求职信
2014/05/29 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android