HTML、CSS、JavaScriptを使用して、完全に機能するWebベースの手描きスケッチパッドアプリを作成します。必要条件
1.キャンバスの描画領域：
マウス（デスクトップ）およびタッチ入力（モバイル/タブレット）で描画できます。
タッチデバイスで描画中にページがスクロールしたり、Pull-to-Refreshしたりしないようにすること。
描画ストロークは滑らかで、アンチエイリアス（ギザギザがない）であること。
2.ツールバー（上部に固定、小さい画面では水平にスクロール可能）：
以下のボタンを含む：
"消しゴム"
"元に戻す"
"やり直し"
"クリア"
"ダウンロード"
を含みます：
カラーピッカー（サードパーティのJSライブラリを使用することができます）。
11種類のブラシ・スタイルを持つブラシ・タイプ・セレクタ：
1.通常のペン
2.マーカー
3.蛍光ペン
4.カリグラフィー筆
5.破線
6.スプレーペイント
7.鉛筆（テクスチャー効果あり）
8.グローペン（グロー／ライト効果付き）
9.水彩画（半透明ブレンド）
10.クレヨン（ざらざらした質感）
11.ブラシサイズセレクター（ストロークの幅を調整可能）
ブラシは視覚的に実際のスタイルと一致し、レンダリングがスムーズでなければならない。
3.ダウンロード機能：
ダウンロード」ボタンは、描画をPNGファイルとして保存しなければならない。
ファイル名形式：drawing-yyyyMMddHHmmss.png（例：現在の日付と時刻を使用したdrawing-20250511221530.png）。
ダウンロードされた画像の幅と高さは、現在表示されているキャンバスの比率と一致し、アスペクト比の一貫性が保たれていなければなりません。
4.レスポンシブでモダンなUI：
ミニマルでモダンなデザインを採用。
完全なモバイルフレンドリー（レスポンシブ）。
小さい画面ではツールバーが水平に自動スクロールすること。
フッターを固定またはページ下部に追加する。
---
テクニカルノート
タッチイベント(touchstartやtouchmoveなど)がデフォルトのスクロール動作を防止することを確認してください。
よりスムーズな描画のためにrequestAnimationFrameを使用してください。
ブラシの場合は、CanvasRenderingContext2D パターンまたはピクセル操作を使って、必要に応じてテクスチャ効果をシミュレートします。
レイアウトにはCSS FlexboxまたはGridを、応答性にはメディアクエリを使用してスタイルを設定します。
コピー
