CSS Paint API繪製透明格子背景例項頁面
阿新 • • 發佈：2018-12-22
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); } } } });