demo放在首位： https://dante.jdtj.top/gent/

我依赖pixijs，编写了一个用于canvas排版的库。

这里的排版不同于 html2canvas 之类的库，它们是生成一张图片，这里的排版是要整个页面用 canvas 绘制，包含动画、交互等等(相似 react-canvas，外国小红书搞进去的货色，曾经凉了)

做这个货色，次要是优化长列表和加强交互成果。长列表的dom计划有虚构列表只渲染可视区的节点，然而在疾速滚动的时候，高低会留白。然而如果用canvas来解决，能够失去一个简直完满的成果。举个例子：https://chart.caihongduoduo.com/chart?lotteryId=1000&lotteryL...(在手机上关上)。能够看到，canvas解决后的长列表十分晦涩。

页面都用canvas排版后，能实现什么成果：

  1. 外部自带优化计划，解决海量节点渲染的性能问题。

    两种优化方法：

    其一：不在可视区的内容，跳过渲染。不影响它的节点对象，在它不被渲染时也能够对其属性进行操作

    其二：对页面部分进行缓存，在页面重排重绘时，缩小渲染

  2. 页面成果更丰盛

    一、封装补间动画办法，实现相似css动画的成果

      /**   *   * @param params   * name 动画名称   * duration 动画执行时长 ms   * delay 提早多久执行   * func 补间动画执行的 贝塞尔办法名 或者 动画模板名称   * attr{} 动画操作的属性   * callback 动画执行结束后的回调   */regKeyFrames(params)
  二、在节点上调用
```regCustomRender(canvas: HTMLCanvasElement)
```后，会用传入的canvas笼罩节点自身的渲染，在联合
```getSnapshoot('base64')
```获得节点的渲染后果能够实现炫酷的成果。 这是demo的录屏：https://dante.jdtj.top/gent/demo.mp4
  1. 原滋原味的截图，不会有兼容问题和失真。但也要留神图像的跨域问题

页面如何便捷排版

节点

想要齐全实现dom的排版体验比拟艰难。我目前实现了一套简略的排版形式：

Graph      裸露一个pixiJS的Graphics对象，充当"canvas"的角色Text      文本Image     图片Input     输入框，对input进行包装，反对type = ['text', 'password', 'number']    Video      视频渲染Select      下拉框Option      下拉框的选项ScrollY   纵向滚动容器，主动计算内容高度和滚动条ScrollX   横向向滚动容器，主动计算内容宽度和滚动条HorLinearLayout 横向线性布局,外部元素都是程度排列VerLinearLayout 纵向线性布局，外部元素都是垂直排列AbsoluteLayout" 相对定位布局，外部元素基于AbsoluteLayout定位，AbsoluteLayout基于父级定位FixedLayout 固定定位布局，外部元素基于FixedLayout定位，FixedLayout基于app挂载对象定位

这些个布局容器能够互相嵌套，尽管写法比拟啰嗦，但曾经能够实现大部分的页面布局。

属性

在属性上，也反对了%，px，calc，auto。这些外面最难实现的是auto。其余几个的子父级影响都能够认为是单向的，都是子级依赖父级的尺寸进行计算，而auto，它就须要子级尺寸变动时影响父级的尺寸，父级又会影响父级的父级和父级的子级，引起大量的计算。这样的影响，直到传递到尺寸不受影响的节点为止，因为它没有被这次从新计算扭转尺寸，那么它就不会影响它的子级和父级，影响进行于此。

目前实现了以下的属性：

widthheightmarginLeftmarginRightmarginTopmarginBottomborderLeftWidthborderRightWidthborderTopWidthborderBottomWidthborderLeftColorborderRightColorborderTopColorborderBottomColorrotate 旋转角度 0-360anchor 锚点，rotate和scale受它的影响bgColor 背景色top AbsoluteLayout，FixedLayout和他们的子节点可用。HorLinearLayout的子节点可用bottom AbsoluteLayout，FixedLayout和他们的子节点可用。HorLinearLayout的子节点可用left AbsoluteLayout，FixedLayout和他们的子节点可用。VerLinearLayout的子节点可用right AbsoluteLayout，FixedLayout和他们的子节点可用。VerLinearLayout的子节点可用id 通过getElementById找到节点groupId 通过getElementsByGroupId找到节点组，相似getElementsByClassName// text特有属性lineHeight 行高fontSize 字号fontColor 文字色彩text 文字内容fontFamily wordWrapbreakWords
其余

所有的节点都自带 overflow: hidden 成果