1、技术选型

特点 | css | canvas | ---- | ---- | ---- | 成本| 简单，少量api就可以做复杂动画| 大量代码做简单动画 性能|可以自动做到优雅降级|需要做代码兼容 灵活性|较差|非常灵活 多状态切换|复杂不好操作|可以优雅做到 临界检测|不能精确做临界点判断|可以做到

总结：

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

2、思考（如何权衡）

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

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

什么是可维护性代码

1. 可读性
2. 适用性
3. 可扩展性
4. 可调试性

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

name|type|描述 | :- | :- | :- | canvas|canvas|canvas元素 ctx|ctx|canvas上下文 config|DOM[] |配置 gain|number| canvas放大倍数 mounted|func| 编译之后，canvas绘制完成调用 created|func| 在创建之初，编译之前

name|type|描述 | :- | :- | :- | startTime | number| touchstart触发时间 endTime |number| touchend触发时间 startClientX |number| touchstart触发x坐标 startClientY |number| touchstart触发y坐标 endClientX |number| touchsend触发x坐标 endClientY |number| touchsend触发y坐标 moveClientX |number| touchmove触发x坐标 moveClientY |number| touchmove触发y坐标 speed |{x:number,y:number}| 滑动速度对象 x方向速度 y方向速度 单位1000px/s $apply()|func:viod|更新画布，会触发编译 draw()|func:viod|更新画布，不会触发编译 getClassList|get func: {className: string[]}| 获取class

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

name|type|描述 | :- | :- | :- | e.self | object| 得到此元素本身 e.parent | object| 得到此元素父级 e.index | number| 属于第几层级元素

name|type|描述|是否可继承 | :- | :- | :- | :- | click|func| 点击事件| 否 touchmove|func| touchmove事件| 否 touchstart|func| touchstart事件| 否 touchend|func| touchend事件| 否 children|DOM[]|子集 | 否 w|number|宽 |是 h|number|高 | 否 x|number|x坐标 （在子元素中使用会被视为绝对定位，以屏幕左上角开始计算）| 否 y|number|y坐标 （在子元素中使用会被视为绝对定位，以屏幕左上角开始计算）| 否 fontSize|number|字体大小| 是 color|string|字体颜色 |是 opcity|number|透明度 |是 zIndex|number|层级| 否 whiteSpace|string opt['nowrap'] | 父级宽度可被撑开，整行展示| 否 class|string|className| 否 backgroundImage|HTMLCanvasElement & string|背景图片| 否 maxLine|number|文字最大展示行数| 否 scale|{x:number,y:number}|缩放| 否 rotate|number & string|旋转(单位deg) | 否 particle|{size:number,d:number}|粒子 size（粒子大小）d（粒子间距）| 否 border|string|边框（如1rpx solid red 或者 1rpx dashed:10:3 red）10为线宽3为间距，可不写默认10：3| 否 lineHeight|number|行高| 否 text|string|文字（有这个就会绘制文字）| 否 textAlign|string| start默认 center居中 end| 否 backgroundColor|string|背景颜色| 否 backgroundSize|{w:number,h:number}|背景尺寸| 否 backgroundPosition|{x: number,y:number}| 背景位置，从元素左上角计算| 否 paddingLeft|number|内边距| 否 paddingTop|number|内边距| 否 marginLeft|number|外边距 （只从父级左上角计算，与兄弟元素无关）| 否 marginTop|number|外边距 （只从父级左上角计算，与兄弟元素无关）| 否 canLRSlide|boolean|可以左右滑动 默认不可以| 否 overText|string|超出展示的文字 如：展开 | 否 overTextColor|string| 超出展示的文字的颜色| 否