Canvasで長方形を扇のように分割する 🔪

需要があるかは謎ですが、長方形を扇のように分割するコードを書いたので、記録を残しておきます。

DEMO

HTML

<canvas></canvas>
<input type="number" value="5" min="1" max="18" />

JavaScript

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let length = 5;

canvas.width = 400;
canvas.height = canvas.width / 2;

document.querySelector('input').addEventListener('input', (evt) => {
  length = Number(evt.target.value);

  render();
});

render();

function render() {
  canvas.width = canvas.width;

  new Array(length).fill(null).forEach((_, i) => {
    ctx.save();
      ctx.lineWidth = 1;
      ctx.strokeRect(0, 0, canvas.width, canvas.height);

      if (i) {
        ctx.strokeStyle = 'black';
        ctx.beginPath();
        ctx.moveTo(
          canvas.width / 2,
          canvas.height
        );
        ctx.lineTo(
          canvas.width / 2 - canvas.height / Math.tan((180 / length * i) * Math.PI / 180),
          0
        );
        ctx.stroke();
      }
    ctx.restore();
  });
}