UTILITY LABO (画像関連ツール)


目次
編集
加工 描画・枠
スポーツ
アニメ
その他 / 暗号関連 ゲーム
Twitter Twitter WSE (@mod_labo) UTILITY LABO 公式SNS

JSキャンバス線画コード作成ツール (描画パス取得ペンツール)

1.
CANVAS SIZE : ×
▼  線設定 [ 表示 ]
▼ 線設定 [ 非表示 ]
指定可能な座標のピクセル単位 (直線の推奨値は10)
線の太さ
線の色
線の透明度 (0.00~1.00)
線で囲んだ範囲 [ 表示 ]
▼ 線で囲んだ範囲 [ 非表示 ]

塗る色
塗る透明度 (0.00~1.00)
線の形状 [ 表示 ]
▼ 線の形状 [ 非表示 ]
線の形状
context.setLineDash([ ]);
線端の形状 (butt / round / square)
context.lineCap = ' ';
線の接合部の形状 (miter / round / bevel)
context.lineJoin = ' ';
座標の点 [ 表示 ]
▼ 座標の点 [ 非表示 ]
点の数字の色
点の背景の色
▼  背景設定 [ 表示 ]
▼ 背景設定 [ 非表示 ]
画像 (合成) [ 表示 ]
▼ 画像 (合成) [ 非表示 ]
画像を背景レイヤーに合成してトレースする場合
IMAGE

描画コードを実行して背景レイヤーに表示
背景の色
背景の透明度 (0.00~1.00)
升目 [ 表示 ]
▼ 升目 [ 非表示 ]
升目のピクセル単位
升目の色
升目の透明度 (0.00~1.00)
▼  詳細設定 [ 表示 ]
▼ 詳細設定 [ 非表示 ]
キャンバス
コンテキスト (設定したコンテキストで描画コードに出力)
var = document.getElementById('canvas').getContext('2d');
追記するコード (背景の上に表示)
※ 描画コードと画像の保存には反映されません。
描画コードの数値 [ 表示 ]
▼ 描画コードの数値 [ 非表示 ]
描画コードの数値の横方向の加算値・減算値 (X軸)
描画コードの数値の縦方向の加算値・減算値 (Y軸)
描画コードの数値の横方向の倍率 (X軸)
描画コードの数値の縦方向の倍率 (Y軸)
座標の点の移動 [ 表示 ]
▼ 座標の点の移動 [ 非表示 ]
全ての座標の位置を横方向に移動する (X軸)
全ての座標の位置を縦方向に移動する (Y軸)
全ての座標の位置を横方向に拡大・縮小する (X軸)
全ての座標の位置を縦方向に拡大・縮小する (Y軸)
キャンバスの座標を左右反転
キャンバスの座標を上下反転
キャンバスの座標を180度回転
キャンバスの座標を90度回転 (縦横の比が1:1の場合のみ対応)
キャンバスの座標を270度回転 (縦横の比が1:1の場合のみ対応)
座標の点の変更 [ 表示 ]
▼ 座標の点の変更 [ 非表示 ]
の間に座標の点を追加する
アドバイス

座標の点を右クリックすると削除する
の座標の描画モード(直線・曲線)を変更する
アドバイス

直線と曲線(二次ベジェ曲線)を変更する場合は二箇所の点を変更する必要がある
パスレイヤー [ 表示 ]
▼ パスレイヤー [ 非表示 ]
コピー元のパスレイヤー番号
コピー先のパスレイヤー番号
パスレイヤー名
パスレイヤー番号
座標ログの入出力 [ 表示 ]
▼ 座標ログの入出力 [ 非表示 ]
キャンバスの座標ログを出力する (保存)
座標ログをキャンバスに入力する (読込)
LOG FILE


▼ 
2.
形状 [ 表示 ]
▼ 形状 [ 非表示 ]

線の種類
▼ 
3.
クリックで座標を指定 (ドラッグ&ドロップで座標の位置を修正)

▼ 
自動更新対応 
▼ 
RESULT
座標履歴 [ 表示 ]
▼ 座標履歴 [ 非表示 ]
▼ 描画コード
>> JSキャンバス描画コードプレビュー
▼  画像をダウンロード 
画像形式 [ 表示 ]
▼ 画像形式 [ 非表示 ]
FORMAT
SVGはベクター形式の画像です。ベクター形式は拡大しても画質が劣化しない画像です。
説明

表示
非表示
JavaScriptのCanvasで使える線画コード用の座標を取得して描画パスを作るペンツールです。直線(折れ線)と曲線(2次ベジェ曲線)の描画パスに対応。

描画コード (線画コード) … JavaScript(Canvas)で使うための描画パスです。
座標ログ … 当ツールで作ったデータを保存したファイルです。当ツールで読み込むと再編集することができます。当ツール専用ファイルなので外部ツールでは使えません。
画像ファイル … ブラウザーなど様々な環境で画像を表示するためのファイルです。
アドバイス 作り方の基本と応用

キャンバスの拡大表示
表示
非表示
キャンバスの拡大または縮小をしたい場合は、利用しているブラウザーの機能を使って下さい。
PCのChromeの場合は「Shift+マウススクロール」で拡大・縮小できます。
拡大・縮小した時の倍率はページを再読み込みしても残るので、必ず元の倍率に戻すのを推奨しています。

指定可能な座標のピクセル単位
表示
非表示
設定したピクセル単位の倍数のみ座標を指定できるようになります。 おすすめのピクセル単位は「10」です。 初期設定は「1」です。

描画パスの作成 (座標点の追加、移動、削除、など)
表示
非表示
座標の点を作成する … キャンバスをクリックする。
座標の点の位置を修正する … 座標の点をドラッグ&ドロップする。
座標の点を追加する … 座標の点の途中に新しく追加することができる。実行する場合は「詳細設定 > 座標の点の変更」を開いて下さい。
座標の描画モードを変更する … 途中の座標の描画モードの直線・曲線を変更できる。実行する場合は「詳細設定 > 座標の点の変更」を開いて下さい。
最後の座標を取り消す … 「↩」ボタンをクリックする、またはキーボードのスペースキーを押す。
全ての座標を削除する … キャンバスに表示されている座標の点を全て削除できる。「RESET」ボタンをクリックする、またはキーボードのエスケープキーを押す。
全ての座標の位置を横方向・縦方向に移動する … 実行する場合は「詳細設定 > 座標の点の移動」を開いて下さい。
全ての座標の位置を横方向・縦方向に拡大・縮小する … 実行する場合は「詳細設定 > 座標の点の移動」を開いて下さい。
キャンバスの座標の点を左右反転・上下反転・180度回転する … 実行する場合は「詳細設定 > 座標の点の移動」を開いて下さい。
新しいパスを作成する … 「新規パスレイヤー作成」ボタンをクリックする。
他のパスを再編集する … パスレイヤーのセレクトボックス(プルダウンメニュー)を変更する。または「▲・▼」ボタンをクリックするかキーボードの上方向・下方向を押す。
作ったパスをコピーする … 実行する場合は「詳細設定 > パスレイヤー」を開いて下さい。
作ったパスに名前を付ける … 実行する場合は「詳細設定 > パスレイヤー」を開いて下さい。

カーブの描画パス (2次ベジェ曲線の始点・制御点・終点)
表示
非表示
カーブ(2次ベジェ曲線)の描画するには「曲線 (二次ベジェ曲線)」を選択してから「始点」を決めた後に「制御点」「終点」の2つの座標を作る。 続けてカーブを描画する場合は再び「制御点」「終点」の2つの座標を作る。
「始点」「終点」を作る時は「」が表示され、「制御点」を作る時は「」が表示される。
「制御点」をどこに設置すればいいか分からない場合は「始点」と「終点」の途中に適当に設置して、後で「制御点」の位置をドラッグ&ドロップで修正して下さい。

カーブの描画パス (3次ベジェ曲線の始点・制御点1・制御点2・終点)
表示
非表示
カーブ(3次ベジェ曲線)の描画するには「曲線 (三次ベジェ曲線)」を選択してから「始点」を決めた後に「制御点1」「制御点2」「終点」の3つの座標を作る。 続けてカーブを描画する場合は再び「制御点1」「制御点2」「終点」の3つの座標を作る。
「始点」「終点」を作る時は「」が表示され、「制御点1」「制御点2」を作る時は「」が表示される。
「制御点」をどこに設置すればいいか分からない場合は「始点」と「終点」の途中に適当に設置して、後で「制御点」の位置をドラッグ&ドロップで修正して下さい。

その他の形状 (円形、楕円、四角形、など)
表示
非表示
その他の形状(線以外)は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年以降)のバージョン必須

PC (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
<< 目次 (画像関連ツール)



その他のサイト / セーブエディター.com (ゲーム関連) / 暗号・パスワード関連ツール (セキュリティ関連)
WSE 2022 (C) UTILITY LABO © WEB-G-P.com お問い合わせ (メールフォーム) / ツイッター