渐变设计器

  该应用是一个渐变设计器，可以方便地生成 CSS 渐变或者 Canvas 渐变语句。

  预览效果实时更新，你可以修改渐变参数，切换 CSS/Canvas 渲染效果。

  如果颜色值存在透明度，你可能会发现 CSS 和 Canvas 效果并不一致。这是浏览器内部实现差异导致的。在进行颜色插值的时候，CSS 的 gradient 是 Alpha 预乘插值，而 Canvas 的 Gradient 是直通插值。预乘插值的处理方式是将 R、G、B 通道先乘以 Alpha，然后插值。我有尝试对 Canvas 的渐变进行同样的预处理，但效果依然不一致。所以还是维持 Canvas 默认的效果。

  线性渐变的起止点位于包围盒顶点与渐变线的垂线的垂足处。CSS 线性渐变起止点

  所以对于 Canvas 我也是同样的算法。但旋转角度与 CSS 存在差异，CSS 0deg 为向上，Canvas 0deg 为向右。