前言

不久前写过一个优惠券的样式，主要涉及了内圆角及圆形锯齿；如下图所示; 具体思路采用before、after伪元素实现；before来实现内角边框，主要设置border加绝对定位实现；after来实现锯齿，利用background-image加绝对定位实现；最近读到一篇关于houdini的文章，一时兴起，决定利用houdini实现一次。

伪元素实现方式

废话不说，先上代码

实现内角边框

假设内角半径为r:10rpx,优惠券高度为h;主要生成一个宽度为 $2*r$ ，高度为 $h+2*r$ 的伪元素，样式如下：
```
border-top:20px dotted white;
border-bottom:20px dotted white;
```
以优惠券左边区域为例，利用绝对定位，将伪元素移动到右边，样式如下：
```
top: -10px;
right: -10px;
```

锯齿实现

设置background-image，利用径向渐变绘制小圆（3px）加一个间距(3px)，样式如下：

background-image: radial-gradient(
  3px at 3px 6px,
  transparent,
  transparent,
  transparent,
  transparent,
  #ff9500
);

设置background-position、background-size、background-repeat，重复背景，样式如下：

background-position: 0px 0px;
background-size: 3px 9px;    
background-repeat: repeat-y;

Houdini实现方式

废话不说，先上代码

CSS Houdini简介

Houdini是一组底层 API，它们公开了CSS引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini是一组API，它们使开发人员可以直接访问CSS对象模型（CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。CSS Houdini - Web 开发者指南 | MDN (mozilla.org)

Paint API

PaintWorklet

PaintWorklet可以对css的属性值期望是一个文件的css属性设置为通过编程的方式生成image；通过CSS静态只读方法paintWorklet来访问这个接口。

首先要通过registerPaint()注册一个class,暂时先不管这个class如何定义，先关注如何访问这个接口:PaintWorklet继承Worklet接口，而Worklet是一种轻量的Web Workers,所以和Web Workers一样，他需要一个独立的js文件，并通过CSS.paintWorklet.addModule()方法加载，该独立的js文件运行中的globalThis指向的是PaintWorkletGlobalScope,可以直接访问registerPaint方法。
该class需要包含一个名称为paint的成员方法，该方法接受3个参数，context、geom、props;context是一个类似canvas的渲染上下文对象，geom是画布大小，props是一个类似map的对象，里面存储自定义的css属性；接下来就可以利用canvas的知识来绘制该画布了

CSS Houdini--优惠券锯齿

前言