canvasrun v1.0.0

1、技术选型

总结：

• css: 适合做单一重复少状态切换切复杂的动画
• canvas：适合做多状态切换简单动画

2、思考（如何权衡）

• 可维护性
• 开发效率
• 性能

sequenceDiagram
可维护性->>性能: 逻辑清晰，无冗余代码
可维护性->>提升开发速度: 可理解性、可修改性、可测试性

gantt
dateFormat YYYY-MM-DD
section 个人书店
开发用时6天，4天开发框架，2天写需求: 01, 6d
section 图书漂流
开发4天，1天完善框架，1天设计动效，2天写需求: 01, 4d
section 下一个
2天写需求:01, 2d

3、绘制canvas

• 性能（使用最优性能的计算方式、将大量计算放在编译中执行、超出canvas外的视图不予绘制）
• 布局（用css的api写canvas）
• 裁剪图片
• 文字处理
• 粒子效果

• 优化

框架结构图

graph TD
    A[绘制canvas] --> B[compile 编译]
    A --> |编译完成后| K[绘制]
    A --> C[封装事件]
    B --> H[生成DomTree]
    A --> F[注册钩子函数]
    B --> D[建立父子关系]
    B --> E[注册事件]
    B --> G[注册class]
    
    K --> J[获取DomTree并建立层级关系]
    J --> I[开始绘制]
    I --> M[绘制图层]
    I --> O[储存事件]
    P[用户触发后] --> C
    M --> ST[视图绘制]
    M --> LZ[粒子绘制]
    LZ --> CCLZ[粒子储存]
    LZ --> HZLZ[粒子绘制]
    C --> O
    ST --> JX[矩形绘制]
    JX --> CJ[图片处理]
    JX --> BG[背景处理]
    JX --> CJJ[裁剪]
    ST --> SF[缩放]
    ST --> XZ[旋转]
    ST --> FONT[文字绘制]
    FONT --> MH[多行文字]
    FONT --> HH[文字换行]
    FONT --> OC[宽度计算]
    FONT --> OH[超出展示]
    FONT --> WW[文字渲染等等]

graph TD
    A[交互] --> B[事件]
    B --> BS[touchstart]
    B --> BM[touchmove]
    B --> BE[touchend]
    B --> BC[click]
    A --> C[操作DOM]
    C --> CE[通过class获取dom]
    C --> CF[0级DOM事件]
    

graph TD
    A[工具] -->|解析字符串| B[analysisString]
    A -->|计算文字宽度| BS[computedText]
    A -->|下载单张图片| BM[createdImg]
    A -->|canvas生成图片| BE[createdImageUrl]
    A -->|下载多张图片并返回进度| BC[downloadFile]
    A -->|判断是否为纯对象| CH[isPlainObject]
    A -->|获取纯对象的所有key| CE[objectkeys]
    

api

包括返回所有DOM数据以外，额外返回