CSS Houdini

完整CSS代码及JS代码如下：

.ripple {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border: none;
  font-size: 16px;
  border-radius: 6px;
  background-color: rgb(64 179 255);

  --ripple-x: 0;
  --ripple-y: 0;
  --animation-tick: 0;
}
/* 点击后增加的动画效果 */
.ripple.animating {
  background-image: paint(ripple);
}

HTML 代码如下：

Click me!

绘制图形JS需要以模块引入，CSS.paintWorklet.addModule 能让 web 引入 ripple.js 这个脚本，并另外开辟线程执行。它不会影响主线程，这是 worklet 的重要“卖点”！

ripple.js代码如下：

registerPaint('ripple', class {
paint(ctx, geom, properties) {

// 像写canvas一样绘制动画

}
});

以上就是 CSS Paint API 大概的使用方式，先总结下：

CSS 中使用 paint 方法
JS 添加绘制代码脚本
ripple.js 中像写 Canvas 一样绘制图形