Skip to content

Latest commit

 

History

History
43 lines (27 loc) · 1001 Bytes

3.3.8 CSS Paint API.md

File metadata and controls

43 lines (27 loc) · 1001 Bytes

3.3.8 CSS Paint API

CSS Paint API可以让Canvas画布作为普通元素的background-image背景图片呈现，其作为一个CSS属性值，渲染是实时的，

因此可以以一种更高效的方式丰富web页面元素的视觉展现。

此API使用需要配合JavaScript使用才行，有一定门槛，包括CSS模块注册和使用canvas API语法进行图形绘制。

.box {
    width: 180px; height: 180px;
    /* someShape自己命名 */
    background-image: paint(someShape);
}

<script>
  if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('checkerboard.js');
  }
</script>


// # checkerboard.js 文件代码如下:
// transparent-grid命名和CSS中的对应
registerPaint('someShape', class {
    paint(context, size) {
       // 这里就是绘制的代码了....
    }
});

参考