数据可视化

CSS3动画

形变

transform：<transform-function>：用于对元素进行变换的属性，可以应用于 2D 和 3D 变换。可以平移、旋转、缩放和倾斜。
transform-origin：x y? z?，用于定义一个元素进行变换时的原点。只能在配合 transform 属性使用时生效。
transform-style：flat | preserve-3d，指定子元素如何在 3D 空间中呈现。主要与 transform 属性配合使用。
backface-visibility：visible | hidden，指定某个元素当背面朝向观察者时是否可见。常与 transform 属性结合使用。
perspective：d：通过定义观察者与Z=0平面之间的距离，在 3D 空间中设置一个元素的透视效果。设置在父元素上。

动画

animation：name duration timing-function? delay? iteration-count? direction? fill-mode? play-state?，创建动画效果的属性。通过定义多个关键帧（keyframes）来控制元素在一定时间内的状态变化。可以指定动画的持续时间、延迟、播放次数、播放速度等。
@keyframes animation-name：{from, to} | {0%, ..., 100%}，定义动画的关键帧（从一个状态到另一个状态的过渡）的规则。通过 from 和 to 或者百分比值来定义。

canvas

<canvas>：with height，被用来通过 JS（Canvas API 或 WebGL API）绘制图形及图形动画的元素。
el.getContext()：(contextType, contextAttributes?)，返回canvas的上下文，如果上下文没有定义则返回null 。
el.toDataURL()：(type?, quality?)，将 Canvas 转换为 Base64 编码的图像。

设置

ctx.fillStyle：color| gradient | pattern，默认：#000，设置或获取 Canvas 填充颜色或样式
ctx.strokeStyle：color| gradient | pattern，默认：#000，描边颜色
ctx.globalAlpha：number，默认：1.0，0~1的数值，值越小透明度越高，设置或获取 Canvas 的全局透明度。
ctx.createLinearGradient()：(x0, y0, x1, y1)，创建一个沿着参数坐标指定的线的线性渐变。
ctx.createRadialGradient()：(x0, y0, r0, x1, y1, r1)，创建一个沿着参数坐标指定的线的放射性渐变。
gradient.addColorStop()：(offset, color)，用于在渐变中设置颜色停靠点。gradient是通过上述2个方法创建出来的CanvasGradient对象。
ctx.createPattern()：(image, repetition)，用于创建一个图案。
ctx.lineWidth：number，默认：1，设置线条宽度。不带px单位
ctx.lineCap：butt | round | square，默认：butt，用于设置路径的端点样式。
ctx.lineJoin：round | bevel | miter，默认：miter，控制路径连接处的形状。

路径

ctx.beginPath()：()，开始一条新的路径的方法。每次调用 beginPath() 都会清除当前路径，使接下来的绘图操作不会连接到先前的路径上。
ctx.closePath()：()，用于关闭当前路径的方法。将路径的最后一部分连接回到起始点，形成一个闭合的路径。
ctx.moveTo()：(x, y)，将当前路径的起始点移动到指定的起始点坐标点。
ctx.stroke()：()，通过线条来绘制图形轮廓/描边（针对当前路径）。
ctx.fill()：()，通过填充路径的内容区域生成实心的图形（针对当前路径）。
ctx.lineTo()：(x, y)，通过连接当前路径的末端点和指定的 (x, y) 坐标来绘制一条直线。
ctx.rect()：(x, y, width, height)，创建一个矩形路径。
ctx.arc()：(x, y, radius, startAngle, endAngle, anticlockwise?)，绘制一段圆弧或圆的路径。0表示3点钟方向。
ctx.ellipsis()：(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise?)，添加一个椭圆路径。
ctx.bezierCurveTo()：(cp1x, cp1y, cp2x, cp2y, x, y)，添加一个 3 次贝赛尔曲线路径。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。

绘制矩形

绘制文本

ctx.font：font-style? font-variant? font-weight? font-size line-height? font-family，默认：10px sans-serif，设置文本的字体样式。
ctx.textAlign：start | end | left | right | center，默认：start，文本对齐选项。
ctx.textBaseline：top | hanging | middle | alphabetic | ideographic | bottom，默认：alphabetic，基线对齐选项。
ctx.fillText()：(text, x, y, maxWidth?)，绘制填充文本。
ctx.strokeText()：(text, x, y, maxWidth?)，绘制描边文本。

绘制图片

ctx.drawImage()：(image, x, y)，版本 1： 绘制图像到画布（不缩放、不裁剪）
ctx.drawImage()：(image, x, y, width, height)，版本 2： 绘制图像并缩放。
ctx.drawImage()：(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，版本 3： 从图像中裁剪出指定的区域，并将其绘制到画布。

形变

动画

window.setTimeout()：(callback,delay?,...args?)，用于在指定延迟时间后执行函数或代码的全局方法。
window.setInterval()：(callback,delay,...args?)，用于周期性无限循环调用函数或代码直到被显式取消的全局方法。
window.requestAnimationFrame()：(callback)，一种浏览器提供的机制，用于在浏览器的下一次重绘之前执行一个函数，它被广泛应用于动画的实现。

countup