▼
Twitter
UL (@utility_labo)
フォローはこちらから
JSキャンバス線画コード作成ツール
(描画パス取得ペンツール)
▼
説明
▼ 表示
▼ 非表示
JavaScriptのCanvasで使える線画コード用の座標を取得して描画パスを作るペンツールです。直線(折れ線)と曲線(2次ベジェ曲線)の描画パスに対応。
描画コード (線画コード) … JavaScript(Canvas)で使うための描画パスです。
座標ログ … 当ツールで作ったデータを保存したファイルです。当ツールで読み込むと再編集することができます。当ツール専用ファイルなので外部ツールでは使えません。
画像ファイル … ブラウザーなど様々な環境で画像を表示するためのファイルです。
アドバイス 作り方の基本と応用
キャンバスの拡大表示
▼ 表示
▼ 非表示
キャンバスの拡大または縮小をしたい場合は、利用しているブラウザーの機能を使って下さい。
PCのChromeの場合は「Shift＋マウススクロール」で拡大・縮小できます。
拡大・縮小した時の倍率はページを再読み込みしても残るので、必ず元の倍率に戻すのを推奨しています。
指定可能な座標のピクセル単位
▼ 表示
▼ 非表示
設定したピクセル単位の倍数のみ座標を指定できるようになります。
おすすめのピクセル単位は「10」です。
初期設定は「1」です。
描画パスの作成 (座標点の追加、移動、削除、など)
▼ 表示
▼ 非表示
座標の点を作成する … キャンバスをクリックする。
座標の点の位置を修正する … 座標の点をドラッグ＆ドロップする。
座標の点を追加する … 座標の点の途中に新しく追加することができる。実行する場合は「詳細設定 ＞ 座標の点の変更」を開いて下さい。
座標の描画モードを変更する … 途中の座標の描画モードの直線・曲線を変更できる。実行する場合は「詳細設定 ＞ 座標の点の変更」を開いて下さい。
最後の座標を取り消す … 「↩」ボタンをクリックする、またはキーボードのスペースキーを押す。
全ての座標を削除する … キャンバスに表示されている座標の点を全て削除できる。「RESET」ボタンをクリックする、またはキーボードのエスケープキーを押す。
全ての座標の位置を横方向・縦方向に移動する … 実行する場合は「詳細設定 ＞ 座標の点の移動」を開いて下さい。
全ての座標の位置を横方向・縦方向に拡大・縮小する … 実行する場合は「詳細設定 ＞ 座標の点の移動」を開いて下さい。
キャンバスの座標の点を左右反転・上下反転・180度回転する … 実行する場合は「詳細設定 ＞ 座標の点の移動」を開いて下さい。
新しいパスを作成する … 「新規パスレイヤー作成」ボタンをクリックする。
他のパスを再編集する … パスレイヤーのセレクトボックス(プルダウンメニュー)を変更する。または「▲・▼」ボタンをクリックするかキーボードの上方向・下方向を押す。
作ったパスをコピーする … 実行する場合は「詳細設定 ＞ パスレイヤー」を開いて下さい。
作ったパスに名前を付ける … 実行する場合は「詳細設定 ＞ パスレイヤー」を開いて下さい。
カーブの描画パス (2次ベジェ曲線の始点・制御点・終点)
▼ 表示
▼ 非表示
カーブ(2次ベジェ曲線)の描画するには「曲線 (二次ベジェ曲線)」を選択してから「始点」を決めた後に「制御点」「終点」の２つの座標を作る。
続けてカーブを描画する場合は再び「制御点」「終点」の２つの座標を作る。
「始点」「終点」を作る時は「●」が表示され、「制御点」を作る時は「〇」が表示される。
「制御点」をどこに設置すればいいか分からない場合は「始点」と「終点」の途中に適当に設置して、後で「制御点」の位置をドラッグ＆ドロップで修正して下さい。
カーブの描画パス (3次ベジェ曲線の始点・制御点1・制御点2・終点)
▼ 表示
▼ 非表示
カーブ(3次ベジェ曲線)の描画するには「曲線 (三次ベジェ曲線)」を選択してから「始点」を決めた後に「制御点1」「制御点2」「終点」の３つの座標を作る。
続けてカーブを描画する場合は再び「制御点1」「制御点2」「終点」の３つの座標を作る。
「始点」「終点」を作る時は「●」が表示され、「制御点1」「制御点2」を作る時は「〇」が表示される。
「制御点」をどこに設置すればいいか分からない場合は「始点」と「終点」の途中に適当に設置して、後で「制御点」の位置をドラッグ＆ドロップで修正して下さい。
その他の形状 (円形、楕円、四角形、など)
▼ 表示
▼ 非表示
その他の形状(線以外)は２点(始点と終点(対角)または中心点と外周の点)の座標を作成して下さい。
矢印は始点から上に伸びると上方向、下に伸びると下方向、右に伸びると右方向、左に伸びると左方向の矢印を作成します。
キーボードの操作
▼ 表示
▼ 非表示
スペースキー … 最後の座標を取り消す。
エスケープキー … 描画中のパスを全てリセットする。(編集中のパスレイヤーのみ)
エンターキー … 新規パスレイヤーを作成する。(編集中のパスレイヤーから新しいパスレイヤーに変更)
上キー・下キー … 編集するパスレイヤーを変更する。
左キー・右キー … 線の種類(直線・曲線(二次ベジェ曲線))を変更する。
パスレイヤーについて
▼ 表示
▼ 非表示
同一のキャンバスで複数のパスを描画する場合は「新規パスレイヤー作成」で多層化(レイヤー化)して下さい。
「パスレイヤー」という単語は造語です。「パス」だけや「レイヤー」だけだと伝わりにくかったり誤解を招くと思い「パスレイヤー」にしました。
座標ログの入出力
▼ 表示
▼ 非表示
座標ログを入出力すると保存したパスを再びキャンバスで編集することが出来ます。実行する場合は「詳細設定 ＞ 座標ログの入出力」を開いて下さい。
描画コード(線画コード)を「座標ログの入出力」で読み込んで再編集することはできません。もちろん画像も読み込めません。
描画コード(線画コード)の実行
▼ 表示
▼ 非表示
HTMLファイルに描画コードを挿入を挿入してからブラウザーで開くと実行できます。
▼ HTMLファイルのサンプル
※ JSキャンバス描画コードプレビューでも実行できます。
対応コード JavaScript Canvas
▼ 表示
▼ 非表示
対応：
lineTo() (直線),
quadraticCurveTo() (2次ベジェ曲線),
bezierCurveTo() (3次ベジェ曲線),
arc() (円形),
ellipse() (楕円),
rect() (四角形),
fill() (塗りつぶす),
stroke() (線を引く),
など
未対応：
createLinerGradient() (線形グラデーション),
createRadialGradient() (円形グラデーション),
fillText() (文字を書く),
strokeText() (文字の輪郭),
など
おすすめ
直線を描画するなら「指定可能な座標のピクセル単位」を「10」に設定するのを推奨しています。
「10」に設定すると思い通りの線を引くのが容易になり目的の形を作りやすくなります。
実行する場合は「線設定 ＞ 指定可能な座標のピクセル単位」を開いて下さい。
曲線を描画する場合は設定を「1」のままにした方が思い通りの線が引けます。
動作環境
▼ 表示
▼ 非表示
ブラウザー … HTML5対応以降(2015年以降)のバージョン必須
ＰＣ (Windows、Mac、Linux) … 対応 (ブラウザー：Chrome、Firefox、など)
スマホ (Android、iPhone、iPad) … マウス操作推奨、タッチ操作非推奨 (ドラッグ＆ドロップで座標の位置を修正できない)
性能 … 低スペック端末でも問題なく動作
あとがき
▼ 表示
▼ 非表示
JSキャンバス線画コード作成ツール(描画パス取得ペンツール)の開発の経緯 ()
始めは自分用(非公開用)のツールとして簡単なものを用意しようとしてたのですが、もしかすると他の人にも需要あるかなと思い公開用に向けて作りました。
いわゆるペンツールの類なのですが、デザイナー向けというよりプログラマー向けのツールになります。
本格的なデザイナーであれば一般的なグラフィックソフトウェア(Photoshop、Illustrator、CLIP STUDIO PAINT、GIMP、など)を使って画像を作るでしょう。
プログラマー向けの理由は単に画像を作るのが目的ではなく、JavaScript(Canvas)用の描画パスを作るのが目的だからです。
画像ではなく描画パスであれば線の太さ、長さ、色、透明度、座標、などの様々な設定を、後からでも自由に書き換えられるので応用が利きます。
けれど画像形式(ラスター形式)ではそうはいきません、サイズを拡大しただけでも画質が低下してしまいます。
ベクター形式なら対応ツールさえあれば何とかなるかもしれませんが、プログラミングでの編集に適した形式ではありません。
JavaScript(Canvas)用の描画パスを作るペンツールが元々あればわざわざ自分で作る必要はなかったのですが、
探してもいいのが見つからなかったので自分で用意してみようと思いこんな機能があればいいなというツールを作りました。
ペイントソフトを全く使いこなせない自分がペイントソフトっぽいツールを作るというのは何とも無謀な話。
過去にもそんな流れで無謀にツールを作ったことは何度かあるのですが。
外部リンク
JavaScript - Wikipedia
canvas要素 - Wikipedia
関連リンク
画像関連ツール
JSキャンバス描画コードプレビュー
▲
上部に移動する
by UTILITY LABO
<< 目次
(画像ツール)
2026 (C) UTILITY LABO
©
UTILITY LABO
お問い合わせ (メールフォーム)
/
ツイッター