​​React​Canvas,Intl.Segmenter,Playwright,TypeScript

Thumbnail of post image 085

文章によく出る言葉を、回数が多いほど大きな文字で並べるワードクラウドを、ライブラリを使わずに React で作りました。回数から文字の大きさを決める計算、canvas で文字の幅を測ってうず巻きに沿って重ならないように置く方法、枠に入 ...

​​React​Canvas,Pointer Events,TypeScript

Thumbnail of post image 074

16×16 のマス目をクリックやドラッグで塗るドット絵エディターを React と TypeScript で作りました。ポインターの位置からマスを求める方法、速く動かしても線が途切れない塗り方、塗りつぶし、元に戻す機能、PNG での保 ...

​​React​Canvas,Playwright,requestAnimationFrame,StrictMode,TypeScript,useEffect,useRef

Thumbnail of post image 177

​

Reactで、canvasの中のボールをrequestAnimationFrameで動かす方法です。canvasの要素とボールの位置をuseRefに持ち、useEffectで始めたループをcancelAnimationFrameで止め ...

カテゴリー