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