✨open/closed subpaths

browser ⟩ canvas ⟩ examples ⟩ open/closed subpaths

💾 程式

closed (left) / open (right) subpaths

💾 replit: open/closed subpaths

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

    const dx = 10;

    ctx.lineWidth = 10;           // stroke width
    ctx.fillStyle = '#f00';       // fill color = red
    
    ctx.beginPath();              // ⭐ begin new path
    
    ctx.moveTo(100 - dx,  40);    // ⭐ begin new subpath
    ctx.lineTo(200 - dx, 140);
    ctx.lineTo(100 - dx, 140);
    ctx.closePath();              // ⭐ closed subpath

    ctx.moveTo(300 + dx,  40);    // ⭐ begin new subpath
    ctx.lineTo(300 + dx, 140);
    ctx.lineTo(200 + dx, 140);    // open subpath
    
    ctx.fill();                   // fill path (⭐ on all subpaths)
    ctx.stroke();                 // stroke path (⭐ on all subpaths)
});

📘 手冊

• CanvasRenderingContext2D ⟩

  • .beginPath() - begin new path.

  • .moveTo() - begin new subpath.

  • .closePath() - add line to start of current subpath.

  • .stroke()

  • .fill()

  • .fillStyle

  • .lineWidth