三角形图案创建功能

更多有趣示例 尽在小红砖社区

示例

HTML

<img alt="pattern" />

<div class="ui">
  <div class="ui__row">
    <label for="themePicker">Theme</label>
    <select id="colorPicker">
    <option selected value="purple, crimson, tomato, orange, gold">Sunrise</option>
    <option value="tomato, gold, yellowgreen, mediumaquamarine, cadetblue">Felt pens</option>  
    <option value="sienna, peru, khaki, darkkhaki, olive">Autumn</option>
    <option value="steelblue, skyblue, paleturquoise, lightcyan, aliceblue">Skyblue</option>
    <option value="darkslategray, teal, lightseagreen, mediumturquoise, aquamarine">Marine Blue</option>
    <option value="darkorchid, mediumorchid, orchid, plum, thistle">Orchid</option>
    <option value="saddlebrown, sienna, chocolate, sandybrown, navajowhite">Brown</option>
    <option value="indigo, rebeccapurple, darkorchid, mediumorchid, orchid, white">Lilac</option>
    <option value="black, white">Black & White</option>
    </select>
  </div>
  <div class="ui__row">
    <label for="N">N</label>
    <input id="N" type="number" value="10" min="1" max="100" step="1">
  </div>
  <div class="ui__row">
    <label for="Seed">Seed</label>
    <input id="Seed" type="number" value="0" min="0" max="100" step="1">
  </div>
 </div>

CSS

body {
  background: #000;
  overflow: hidden;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

img {
  width: 100vmin;
  height: 100vmin;
  margin: auto;
}

.ui {
  background: rgba(255, 255, 255, .8);
  z-index: 1;
  position: absolute;
  width: 220px;
  right: 0;
  top: 0;
  padding: 16px;
  margin: 8px;
  border-radius: 8px;
  font-family: sans-serif;
  font-size: 16px;
}

.ui select {
  font-family: sans-serif;
  font-size: 16px;
}

.ui__row { 
  padding: 4px 0;
  display: flex;
  align-items: center;
}

.ui__row * {
  width: 50px;
  flex: 1 0 50px;
}

JS

function poly(ctx, color, ...coords) {
  ctx.fillStyle = color;
  ctx.strokeStyle = color;
  ctx.beginPath();
  const len = (coords.length / 2)|0;
  ctx.moveTo(coords[0], coords[1]);
  for (let i = 1; i < len; i++) {
    ctx.lineTo(coords[i * 2], coords[i * 2 + 1]);
  }
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
}

function trianglePattern(palette, width = 512, height = 512, N = 10, seed = 0) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  const squares = Array(N*N).fill(0);
  const tW = width / N;
  const tH = height / N;
  squares.map((_, i) => {
    const x = i % N;
    const y = Math.floor(i / N);
    const x1 = x * tW;
    const y1 = y * tH;
    const x2 = x1 + tW;
    const y2 = y1 + tH;
    if ((seed + x + y) % 3 === 0) {
      poly(ctx, palette[(seed + x + y) % palette.length], x1, y1, x2, y1, x1, y2);
      poly(ctx, palette[(seed + x * y + 1) % palette.length], x1, y2, x2, y2, x2, y1);
    } else {
      poly(ctx, palette[(seed + x + y) % palette.length], x1, y1, x1, y2, x2, y2);
      poly(ctx, palette[(seed + x * y + 1) % palette.length], x1, y1, x2, y1, x2, y2); 
    }
  });
  return canvas.toDataURL();
}
const Seed = document.querySelector('#Seed');
const N = document.querySelector('#N');
const colorPicker = document.querySelector('#colorPicker');
const img = document.querySelector('img');

const update = () => {
  img.src = trianglePattern(colorPicker.value.split(', '), 512, 512, parseInt(N.value, 10), parseInt(Seed.value, 10));
}
update();
colorPicker.oninput = update;
N.oninput = update;
Seed.oninput = update;