画板练习

2018.8.2 星期四

~2018.5 画板需求,已经有很多了,都不是完美贴合,
同时也是学习,自己造轮子,且初见成效。
半成品,非成品:
1. 自定义画笔(圆角矩形/箭头/星形等)没有完成
2. undo/redo 没有完成,
3. 同时可以发送当前画板/画笔 共享,以展示或共同完成;同时可以携带作者信息

demo
源码

一 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不仅仅只是缩放

knowledge is no pay,reward is kindness
0%