更多有趣示例 尽在 知屋安砖社区
示例
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;