CSS Paint API与可定制的透明格子背景实例页面

展示

代码

• HTML：

  <h4>默认的</h4>
  <div class="box"></div>
  
  <h4>自定义属性重置后</h4>
  <div class="box box-reset"></div>

  CSS：

  .box {
      width: 180px; height: 180px;
      --color1: #fff;
      --color2: #eee;
      --units: 8;
      background: paint(custom-grid);
  }
  
  .box-reset {
      --color2: skyblue;
      --units: 16;
  }

• 页面内JS：

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

  paint-grid.js代码：

  registerPaint('custom-grid', class {
      // 获取3个变量
      static get inputProperties() {
          return [
              '--color1',
              '--color2',
              '--units'
          ]
      }
      paint(context, size, properties) {
          // 两个格子颜色
          var color1 = properties.get('--color1').toString();
          var color2 = properties.get('--color2').toString();
          // 格子尺寸
          var units = Number(properties.get('--units'));
          // 横轴数轴循环遍历下
          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);
              }
          }
      }
  });