✨regular polygons

browser ⟩ canvas ⟩ path ⟩ example ⟩ regular polygons

👉 see： Canvas+ext

💈範例

💾 replit：canvas polygon

const {floor} = Math;

// ⭐ import
import { vec, linearCombination } from './js/Vector.js';   // 👔 Vector
import { $ } from './js/Node+ext.js';            // 👔 Node+ext
import { } from './js/Canvas+ext.js';            // 👔 Canvas+ext
// --------------------------------------------------------------------

// draw on canvas
$('canvas').draw2D(ctx => {         // 👔 Node+ext, 👔 Canvas+ext
    
    const r  = 50;                  // radius
    const dx = 20;                  // padding between polygons
    const c0 = vec(2*r, 2*r);       // center of first polygon, 👔 Vector
    const v  = vec(2*r + dx, 0);    // vector for translation
    const u  = vec(0, 2*r + dx);    // ...

    ctx.lineWidth = 4;
    
    // polygons (subpaths)
    [3, 4, 5, 6, 7, 8].forEach((n,i) => {
        ctx.drawPolygon(n, {
            // c0 + a*u + b*v
            center: c0.plus(linearCombination([floor(i/3), i%3], [u,v])), 
            radius: r,
            fillStyle: `hsl(${60*i} 90% 50%)`,
        });
    });

});

🗺️ 圖表

⬇️ 應用

👥 相關

History

idx

0: (-) archived

0