2018.8.2 星期四
~2018.5 画板需求,已经有很多了,都不是完美贴合,
同时也是学习,自己造轮子,且初见成效。
半成品,非成品:
1. 自定义画笔(圆角矩形/箭头/星形等)没有完成
2. undo/redo 没有完成,
3. 同时可以发送当前画板/画笔 共享,以展示或共同完成;同时可以携带作者信息
一 crysyan
github:https://github.com/BPing/crysyan
demo:https://home.cbping.vip/crysyan/demo-index.html
a web drawing board with canvas.
样式简洁,功能齐全。
单个组件的API
record:可以记录成video,并播放(webrtc相关)
界面简洁,封装成组件的项目,样式改动困难
封装成 选区/铅笔/形状/橡皮/字体等组件,每一个组件可以单独进行设置
上传图片
还有redo/undo
清空画布
一二 whiteBoard
github:https://github.com/Qbian61/whiteBoard
demo:http://qbian.me:8082/
橡皮擦除整个形状
和第一个相似,黑白样式,没有形状
二 drawingboard.js
github:https://github.com/Leimi/drawingboard.js
demo:http://leimi.github.io/drawingboard.js/
有api和事件回调
填充功能
简单绘制,只有画笔,可以设置颜色大小
有redo/undo,清空
三 wPaint
github:https://github.com/websanova/wPaint#wpaintjs
demo:http://wpaint.websanova.com/
有api
保存图片
加载背景图片
填充
形状可选
redo/undo,clear,size,color,
四 sketchpad
github:https://github.com/yiom/sketchpad
demo:http://www.htmleaf.com/Demo/201604023292.html
有api,npm包
animate
单一画笔,颜色/大小,
redo/undo
五 literallycanvas
github:https://github.com/literallycanvas/literallycanvas
demo:http://literallycanvas.com/index.html
功能全,有api
-二 仿windows画图工具的html5画图工具
home:http://www.htmleaf.com/html5/html5-canvas/201801224943.html
demo: http://www.htmleaf.com/Demo/201801224944.html
仿的真全,还包括菜单栏,调整画布大小
-一 Canvas-Tattle
【Canvas杂谈:第一季】RAF/FPS/dt干嘛用?
【Canvas杂谈:第一季】我只画了一条线,为什么我越来越慢?
【Canvas杂谈:第一季】别告诉我你只能贴矩形的图
【Canvas杂谈:第一季】啊啊啊!为什么我画不出1像素的线!!
【Canvas杂谈:第一季】我有菱角,请让我变得圆滑
【Canvas杂谈:第一季】我是画笔,也是橡皮擦
【Canvas杂谈:第一季】我的身后,拖着一条长长的尾巴
【Canvas杂谈:第一季】画了一个圆,帮我长出事件
【Canvas杂谈:第一季】scale不仅仅只是缩放