ペインター ガイド

充実したツールセットでキャンバスにペイントや描画ができます。フリーハンドブラシ、図形、消しゴム、テキスト、背景色のカスタマイズ — PNGでダウンロード。

ペインターに戻る

このツールの機能

ペインターは、シンプルなcanvasベースの描画ツールです。フリーハンドブラシで描き、図形(四角、円、線)を追加、消しゴムを使用、テキストを追加、カスタム背景色を設定。canvasをPNGでダウンロード。クイックスケッチ、注釈、図、シンプルなアートに便利。すべての描画はブラウザで—サーバーなし。

使い方

  1. ツールを選択 — ブラシ、図形、消しゴム、テキストを選択。
  2. 描く — ブラシや図形はクリック&ドラッグ。テキストはクリックで配置。
  3. 設定 — ブラシサイズ、色、塗りつぶしを設定。図形では線と塗りつぶしを選択。
  4. 背景 — 必要に応じてcanvasの背景色を変更。
  5. ダウンロード — canvasをPNG画像で保存。
  6. クリア — canvasをリセットしてやり直し。

動作の仕組み

canvasはHTML5 Canvas要素。描画は2Dコンテキストを使用:ブラシと消しゴムはパス、図形はrect/arc/line、テキストはfillText。マウス/タッチイベントがストロークと図形をキャプチャ。canvasの状態はメモリに保存;ダウンロードは toDataURL('image/png') を使用。コア描画用の外部ライブラリなし—vanilla canvas API。blob URLはダウンロード時のみ使用。

すべての計算はブラウザ内で実行されます。データはサーバーに送信されません。

使用例とサンプル

  • スケッチ — クイックな図や落書き。
  • 注釈 — スクリーンショットや図にマークアップ。
  • — シンプルなフローチャートやワイヤーフレーム。
  • 署名 — クイックな署名をキャプチャ。
  • 教育 — 図形と色をデモ。

  • ブラシ、赤、サイズ5 → 赤いフリーハンド線を描く。
  • 四角ツール → クリック&ドラッグで四角を描く。
  • テキストツール → クリックでテキストを配置;ダイアログで入力。

制限と既知の制約

  • レイヤーなし — 単一レイヤー;クリア以外のundo/redoなし。
  • 永続化なし — canvasの状態は再読み込みで失われる。
  • 基本ツール — グラデーション、パターン、高度なフィルターなし。
  • PNGのみ — ダウンロード形式はPNG;JPEGやSVGエクスポートなし。

すべての計算と変換はブラウザ内で完全に実行されます。データはサーバーに送信されず、入力内容はデバイスから離れません。