在canvas使用圆形（circles）绘制各种模式图案

circles in canvas to compose patterns，利用圆形和数学公式生成各种美丽对称的模式图案。

h5, canvas, math

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2790
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const canvas = document.querySelector('.graph');
const ctx = canvas.getContext('2d');

const inputPoints = document.getElementById('points');
const inputSpeed = document.getElementById('speed');

const resetMultip = document.getElementById('reset');
const plusTen = document.getElementById('plusTen');
const plusOne = document.getElementById('plusOne');

// wrap each range label letter in span 
const rangeLabels = document.querySelectorAll('.slideContainer h4');
rangeLabels.forEach((label) => {
    const word = [...label.textContent];
    label.innerHTML = '';
    word.forEach((letter) => {
        const spannedLetter = document.createElement('span');
        spannedLetter.textContent = letter;
        label.appendChild(spannedLetter);
    });
});

function mValue(value) {
    document.getElementById('mValue').textContent = value;
}

function distance(x1, y1, x2, y2) {
    let xDist = x2 - x1;
    let yDist = y2 - y1;

return Math.sqrt(Math.pow(xDist, 2) + Math.pow(yDist, 2));
}

function map(value, minA, maxA, minB, maxB) {
    return (1 - (value - minA) / (maxA - minA)) * minB + (value - minA) / (maxA - minA) * maxB;
}

let size = {
    s: 8,
    w: 60,
    h: 60,
    o: 1
};

size.sw = size.w * size.s;
size.sh = size.h * size.s;

size.mw = Math.floor(size.sw / 2);
size.mh = Math.floor(size.sh / 2);

size.lw = size.sw - size.s;
size.lh = size.sh - size.s;

canvas.width = size.sw;
canvas.height = size.sh;

let m = 1;
let drawGraph = function drawGraph() {
    let root = document.documentElement;
    let n = inputPoints.value;

if (m >= 999) {
        m = 0;
    } else {
        m += +inputSpeed.value;
    }

let r = Math.floor((size.w - 2 * size.o) * size.s / 2);

rect({
        x: 0,
        y: 0,
        w: size.sw,
        h: size.sh
    }, '#222');
    circle({
        x: size.mw,
        y: size.mh,
        r: r
    }, '#333');

let x, y, e, ex, ey, start, end, lineLength, alpha, hue;
    for (let i = 0; i < n; i++) {
        x = Math.sin(pi2 / n * i - pi2 / 4) * r;
        y = Math.sin(pi2 / n * i) * r;
        circle({
            x: size.mw + x,
            y: size.mh + y,
            r: 2
        }, '#fff');
        e = m * i;
        ex = Math.sin(pi2 / n * e - pi2 / 4) * r;
        ey = Math.sin(pi2 / n * e) * r;
        start = {
            x: size.mw + x,
            y: size.mh + y
        };
        end = {
            x: size.mw + ex,
            y: size.mh + ey
        };
        lineLength = distance(size.mw + x, size.mh + y, size.mw + ex, size.mh + ey);
        alpha = map(lineLength, 0, 400, 1, 0.3);
        alpha = (alpha > 1 ? 1 : alpha).toFixed(2);
        hue = m * 100 % 360;
        line(start, end, `hsla(${hue}, 100%, 85%, ${alpha})`);
    }

let parsM = parseFloat(Math.round(m * 100) / 100).toFixed(2);
    mValue(parsM);
    Hsl = (+m * 100 % 360);

requestAnimationFrame(drawGraph);

root.style.setProperty('--Hsl', Hsl);
};

let rect = function rect(r, color) {
    ctx.fillStyle = color;
    ctx.fillRect(r.x, r.y, r.w, r.h);
};

let line = function line(s, e, color) {
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(s.x, s.y);
    ctx.lineTo(e.x, e.y);
    ctx.stroke();
};

let pi2 = Math.PI * 2;
let circle = function circle(c, color) {
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.arc(c.x, c.y, c.r, 0, pi2);
    ctx.stroke();
};

function patterns(value) {
    m = value;
    inputSpeed.value = 0;
    inputPoints.value = 200;
};

window.addEventListener('load', drawGraph);

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Major+Mono+Display");
:root {
    --Hsl: 140;
}
* {
    margin: 0;
    padding: 0;
    font-family: 'Major Mono Display', monospace;
    box-sizing: border-box;
}
body {
    background: #222;
    text-align: center;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 40px;
}
.main-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 30px;
    flex: 1;
    touch-action: none;
}
canvas {
    display: block;
    max-width: 45vw;
    height: auto;
    max-height: 50vh;
    width: auto;
}
h3,
h4 {
    color: #fff;
}
h3 {
    font-size: 13px;
    margin-bottom: 10px;
}
h4 {
    font-size: 9px;
}
.multiplier-wrap {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin: 15px 0 30px 0;
}
.multiplier-wrap button {
    padding: 4px 16px;
    width: 100px;
    border-radius: 25px;
    border-color: hsl(var(--Hsl), 72%, 78%);
    color: #fff;
    background-color: transparent;
    outline: none;
}
.multiplier-wrap button:hover {
    cursor: pointer;
}
.multiplier-wrap h4 {
    margin-bottom: 4px;
}
.multiplier-wrap h4:last-of-type {
    margin-bottom: 0;
    margin-top: 4px;
}
.multiplier-wrap #mValue {
    font-size: 16px;
}
.slideContainer {
    position: relative;
    display: block;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 200px;
    line-height: 10px;
}
.slideContainer h4 {
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
    letter-spacing: 1px;
    bottom: 24px;
    left: 50%;
}
.slideContainer h4 span {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.slideContainer h4 span:not(:first-of-type) {
    margin-right: 10px;
}
.slideContainer--points h4 {
    margin-bottom: 0;
    bottom: -34px;
}
.slideContainer .slider {
    position: relative;
    z-index: 9999;
    -webkit-appearance: none;
    width: 100%;
    height: 2px;
    border-radius: 50%;
    background: hsl(var(--Hsl), 72%, 78%);
    outline: none;
    opacity: .8;
}
.slideContainer .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: hsl(var(--Hsl), 72%, 68%);
    border: 2px solid #fff;
    cursor: pointer;
    opacity: 0.9;
}
.slideContainer .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}
.coolPatterns-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.coolPatterns-wrap button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    outline: none;
    margin: 8px;
}
.coolPatterns-wrap button:hover {
    cursor: pointer;
}
@media (max-width: 500px) {
    .coolPatterns-wrap button {
        width: 70px;
        height: 70px;
    }
}

HTML

<div class="multiplier-wrap">
    <div class="multiplier-plusTen">
        <h4>add</h4>
        <button class="controlBtn" data-value="10" id="plusTen">10</button>
        <h4>to multiplier</h4>
    </div>

<div class="multiplier">
        <h4>multiplier</h4>
        <button class="controlBtn" data-value="0" id="reset"><span id="mValue"></span>
        </button>
        <h4>click to reset</h4>
    </div>

<div class="multiplier-plusOne">
        <h4>add</h4>
        <button class="controlBtn" data-value="1" id="plusOne">1</button>
        <h4>to multiplier</h4>
    </div>
</div>

<div class="main-wrap">
    <div class="slideContainer slideContainer--speed">
        <input type="range" id="speed" class="slider" name="speed" min="0" max="0.02" value="0.008" step="0.0001">
        <h4 draggable="false">speed</h4>
    </div>

<div class="slideContainer slideContainer--points">
        <input type="range" id="points" class="slider" name="points" min="2" max="200" value="160" step="1">
        <h4 draggable="false">points</h4>
    </div>
</div>

<h3>some cool patterns</h3>
<div class="coolPatterns-wrap">
    <button onclick="patterns(21)" style="background-image:url(https://raw.githubusercontent.com/EntropyReversed/times-tables/master/21m.gif);">
    </button>

circles in canvas to compose patterns，利用圆形和数学公式生成各种美丽对称的模式图案。

h5, canvas, math

编辑器支持Emmet

快捷键

circles in canvas to compose patterns，利用圆形和数学公式生成各种美丽对称的模式图案。

h5, canvas, math

canvas 2d利用GPU加速绘制大量精灵图（drawImage）

使用Paper.js绘制各种几何图形和运动控制

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：