- 学习
canvas、webGL、threeJS、webGIS基础知识 - 实战相关的应用
- canvas基础知识：docs和demo
- canvas常见应用：mini-project（比如富文本，比如表格）
- three.js基础知识：docs和demo
- three.js常见应用：mini-project（比如高德地图上叠加路线）
- webGL基础知识：docs和demo
相关文档：基础、进阶、难点总结
cd canvas/docs
npm install
npm run docs:dev通过白板项目，熟练掌握canvas的常见场景编码，培养canvas坐标、滑动、放大缩小等综合性应用的开发能力，掌握常见的canvas优化方案
开发进度：
- 画布背景网格显示
- 支持绘制矩形
- 无限画布
- 无限画布移动时能够正常重绘所有图形(scrollX和scrollY的修正)
- 支持绘制菱形
- 支持绘制自由画笔
- 支持绘制多行文字
- 支持绘制图片
- 支持整体画布放大缩小
- 支持转化为图片下载
- 性能优化总结
- 支持【选中】、【拖动】、【缩放】、【旋转】
- 支持框选多个元素
- 构建插件架构，为后续功能开发做准备
- 支持切换当前模式为svg
- 支持转化为svg进行绘制
- svg模式支持【选中】、【拖动】、【缩放】、【旋转】
- 性能优化实践
- 交互优化，点击拖拽形成具体的绘制图形，绘制成功后恢复到无状态
- 增加橡皮擦功能
- 支持转化为图片逻辑优化: 没有切割完整，还有大量空白的地方