CSS Paint API绘制透明格子背景实例页面

CSS代码：

.box {
    width: 180px; height: 180px;
    background: paint(transparent-grid);
}
                

HTML代码：

<div class="box"></div>
                

JS代码：

if (window.CSS) {
    CSS.paintWorklet.addModule('paint-grid.js');
}
                

paint-grid.js代码：

registerPaint('transparent-grid', class {
    paint(context, size) {
        // 两个格子颜色
        var color1 = '#fff';
        var color2 = '#eee';
        // 格子尺寸
        var units = 8;
        // 横轴数轴循环遍历下
        for (var x = 0; x < size.width; x += units) {
            for (var y = 0; y < size.height; y += units) {
                context.fillStyle = (x + y) % (units * 2) === 0 ? color1 : color2;
                context.fillRect(x, y, units, units);
            }
        }
    }
});