【React】四角形を描画する

rect関数でCanvasに四角形を描画する。

import React, { useEffect } from 'react';
import p5 from 'p5';

const sketch = (p: p5) => {
  const board_w: number = 450, board_h: number = 450;
  let space_w: number, space_h: number;

  p.setup = () => {
    p.createCanvas(640, 480);
    space_w = (p.width-board_h)/2;
    space_h = (p.height-board_h)/2;
  }

  p.draw = () => {
    p.background('black');
    p.noFill();
    p.stroke('white');
    p.rect(space_w, space_h, board_w, board_h);
  }
}
    
const Canvas: React.FC = () => {
  useEffect(() => {
    new p5(sketch)
  })
  return (
    <React.Fragment>
    </React.Fragment>
  );
}
    
export default Canvas;

今回は、以下のように出力される。

参考

reference | p5.js

p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Process...