🔰nonzero winding rule

browser ⟩ canvas ⟩ path ⟩ nonzero winding rule

⬆️ 需要： drawOnCanvas2D(), regular polygons

// Define a regular polygon
// parameters: 
// - c: canvas drawing context
// - n: number of sides
// - x, y, r: centered at (x,y), radius r.
// - angle: starting angle
function polygon(c, n, x, y, r, angle = 0, counterclockwise = false) {
    
    // Begin a new subpath at first vertex
    c.moveTo(x + r * Math.sin(angle), y - r * Math.cos(angle));

    let delta = 2 * Math.PI / n * (counterclockwise ? -1 : 1);

    // Angular distance between vertices
    for (let i = 1; i < n; i++) {
        angle += delta;
        c.lineTo(x + r * Math.sin(angle), y - r * Math.cos(angle));
    }
    
    c.closePath(); // back to the first 
}

// draw on <canvas>
drawOnCanvas2D('#playground', (ctx) => {

    // Start a new path and add polygon subpaths 
    ctx.beginPath(); 
    polygon(ctx, 3, 50, 70, 50); // Triangle 
    polygon(ctx, 4, 150, 60, 50, Math.PI/4); // Square 
    polygon(ctx, 5, 255, 55, 50); // Pentagon 
    polygon(ctx, 6, 365, 53, 50, Math.PI/6); // Hexagon 
    polygon(ctx, 4, 365, 53, 20, Math.PI/4, true); // Small square inside the hexagon

    ctx.fillStyle = "red"; // fill color
    ctx.strokeStyle = "black"; // stroke color
    ctx.lineWidth = 8; // stroke width

    ctx.fill(); // Fill the shapes 
    ctx.stroke(); // And stroke their outlines
});

drawOnCanvas2D('#play2', (ctx) => {

    // Start a new path and add polygon subpaths 
    ctx.beginPath(); 
    polygon(ctx, 4, 50, 50, 50, Math.PI/4); // Square 
    polygon(ctx, 4, 75, 75, 50, Math.PI/4); // Small square inside the hexagon

    ctx.fillStyle = "pink"; // fill color
    ctx.strokeStyle = "black"; // stroke color
    ctx.lineWidth = 8; // stroke width

    ctx.fill(); // Fill the shapes 
    ctx.stroke(); // And stroke their outlines

    // Start a new path and add polygon subpaths 
    ctx.beginPath(); 
    polygon(ctx, 4, 200, 50, 50, Math.PI/4); // Square 
    polygon(ctx, 4, 225, 75, 50, Math.PI/4, true); // Small square inside the hexagon

    ctx.fillStyle = "#ccffcc"; // fill color
    ctx.fill(); // Fill the shapes 
    ctx.stroke(); // And stroke their outlines

    // Start a new path and add polygon subpaths 
    ctx.beginPath(); 
    polygon(ctx, 4, 350, 50, 50, Math.PI/4, true); // Square 
    polygon(ctx, 4, 375, 75, 50, Math.PI/4, true); // Small square inside the hexagon

    ctx.fillStyle = "#ccf"; // fill color
    ctx.fill(); // Fill the shapes 
    ctx.stroke(); // And stroke their outlines
});

Previouspath NextarcTo()

Last updated 2 years ago

// Define a regular polygon // parameters: // - c: canvas drawing context // - n: number of sides // - x, y, r: centered at (x,y), radius r. // - angle: starting angle function polygon(c, n, x, y, r, angle = 0, counterclockwise = false) { // Begin a new subpath at first vertex c.moveTo(x + r * Math.sin(angle), y - r * Math.cos(angle)); let delta = 2 * Math.PI / n * (counterclockwise ? -1 : 1); // Angular distance between vertices for (let i = 1; i < n; i++) { angle += delta; c.lineTo(x + r * Math.sin(angle), y - r * Math.cos(angle)); } c.closePath(); // back to the first } // draw on <canvas> drawOnCanvas2D('#playground', (ctx) => { // Start a new path and add polygon subpaths ctx.beginPath(); polygon(ctx, 3, 50, 70, 50); // Triangle polygon(ctx, 4, 150, 60, 50, Math.PI/4); // Square polygon(ctx, 5, 255, 55, 50); // Pentagon polygon(ctx, 6, 365, 53, 50, Math.PI/6); // Hexagon polygon(ctx, 4, 365, 53, 20, Math.PI/4, true); // Small square inside the hexagon ctx.fillStyle = "red"; // fill color ctx.strokeStyle = "black"; // stroke color ctx.lineWidth = 8; // stroke width ctx.fill(); // Fill the shapes ctx.stroke(); // And stroke their outlines }); drawOnCanvas2D('#play2', (ctx) => { // Start a new path and add polygon subpaths ctx.beginPath(); polygon(ctx, 4, 50, 50, 50, Math.PI/4); // Square polygon(ctx, 4, 75, 75, 50, Math.PI/4); // Small square inside the hexagon ctx.fillStyle = "pink"; // fill color ctx.strokeStyle = "black"; // stroke color ctx.lineWidth = 8; // stroke width ctx.fill(); // Fill the shapes ctx.stroke(); // And stroke their outlines // Start a new path and add polygon subpaths ctx.beginPath(); polygon(ctx, 4, 200, 50, 50, Math.PI/4); // Square polygon(ctx, 4, 225, 75, 50, Math.PI/4, true); // Small square inside the hexagon ctx.fillStyle = "#ccffcc"; // fill color ctx.fill(); // Fill the shapes ctx.stroke(); // And stroke their outlines // Start a new path and add polygon subpaths ctx.beginPath(); polygon(ctx, 4, 350, 50, 50, Math.PI/4, true); // Square polygon(ctx, 4, 375, 75, 50, Math.PI/4, true); // Small square inside the hexagon ctx.fillStyle = "#ccf"; // fill color ctx.fill(); // Fill the shapes ctx.stroke(); // And stroke their outlines });