Music visualization has always been a fascinating way to enhance the auditory experience, offering a visual representation of sound that can be both mesmerizing and informative. With the power of mode...

react-konvaを利用して、以下機能を持ったお絵かきアプリを作っていく。 ペンツール（色の選択が可能）で線が描ける 進む戻る（UndoRedo）機能が使える 円ツールで円が描ける 背景画像付き gitにソースコード全量あげたのでこちらも参考に。react-konvaデモ（GitHub） 今回はReact19・TypeScriptを利用している "react": "19.1.0", "typescript": "^4.9.5", "konva": "9.3.20", "react-konva": "^19.0.4", Konva・react-konvaのインストール npm install react-konva konva --save ■ react-konvaとは KonvaをReactで使いやすくしたKonva公式のライブラリ。HTML5canvasをReactコンポーネントとして扱えるツールで、図形を操作したり、アニメーションをつけたりできる ■ 基本構造（Stage、Layer、Line） simple.tsx Stage // 大きさ定義ないと動かない width={300} height={300} > Layer> Line points={} stroke="red" /> Layer> Stage> Stage キャンバスの土台みたいなもの。このStage上でないとkonvaは動かない Layer レイヤー層。レイヤーを分けると不要なレンダリングを防げたりする（背景画像とペンツール描画部分を分けたり）ただやみくもに増やせばいいものではなく、最大3－5個程度らしい参考 Line といった１つの配列の値を繋いで線を描いている。x,yのセットで1つの配列の中に順に詰めていくようになっており、実際は大量の値を繋いで滑らかにみえるようになる ■ 基本イベント（Mouse系） onMouseMove （onTouchMove） マウスの移動をキャッチするイベント。これでマウスに沿って線を書ける。ipad対応する場合はonTouchMoveを利用することで対応できる。 onMouseMove.tsx // 例えば左上（1,1）からスタート const = useStatenumber[]>(); // マウスを動きに沿って現在地をセット const handleMouseMove = (e) => { const point = e.target.getStage().getPointerPosition(); setLine([...line, point.x, point.y]); }; return ( Stage width={500} height={500} onMouseMove={handleMouseMove} onTouchMove={handleMouseMove}> Layer> Line points={line} stroke="black" /> Layer> Stage> ); …

Date: November 2025 Category: Web Development, Frontend Engineering Tags: #HTML5Canvas #VanillaJavaScript #WebApps #DrawingApp #FrontendDevelopment