使い方
CanvasChanger from SVG について
CanvasChanger from SVG は Illustrator(R) や Inkscape などの画像処理ソフトで作成した画像を、HTML5のCanvasに変換するツールです。 Canvasを描くためのスクリプトに敷居の高さを感じている方も、このツールを使用することで簡単に画像をCanvasで描くことができます。
※変換可能な画像はSVG形式のみです。
※CanvasChanger from SVG を使用するにはSilverlightがインストール済である必要があります。
※Canvasに対応したブラウザを使用してください。
変換の手順
[サンプルSVGファイルをダウンロード]
変換のテストにお使いください。
- Illustrator(R) や Inkscape などの画像処理ソフトで画像を作成する。
- 作成した画像をSVG(プレーンSVG)で保存する。
- CanvasChanger from SVG を開く。
- 「Choose a SVG file」ボタンをクリックして、変換するSVGファイルを選択する。
- 「Change to Canvas」ボタンをクリック、変換を実行する。
変換の例
マッピング
SVG | Canvas | Note | |
---|---|---|---|
矩形 | rect | moveTo(), lineTo() | |
円 | circle | arc() | |
楕円 | ellipse | moveTo(), lineTo() | |
直線 | rect | moveTo(), lineTo() | |
多角形 | polygon | moveTo(), lineTo() | |
折れ線 | polyline | moveTo(), lineTo() | |
パス | path (変換可能なコマンド) M, m, Z, z, L, l, H, h, V, v, C, c, S, s |
moveTo(), lineTo(), bezierCurveTo() | |
(属性) | |||
面の色 | fill | fillStyle | |
線の色 | stroke | strokeStyle | |
線の太さ | stroke-width | lineWidth | |
線形グラデーション | linearGradient | createLinearGradient() | SVGの書き方によっては変換できない場合があります。 変換後の色合いが多少異なる場合があります。 |
円形グラデーション | radialGradient | createRadialGradient() | SVGの書き方によっては変換できない場合があります。 変換後の色合いが多少異なる場合があります。 |
Canvasに変換可能なIllustratorの機能
以下のツールで描かれたものをCanvasに変換することができます。
- 長方形ツール
- 角丸長方形ツール
- 楕円形ツール
- 多角形ツール
- スターツール
- ペンツール
- 直線ツール
- 円弧ツール
- 鉛筆ツール
- スパイラルツール
- 長方形グリッドツール
- 同心円グリッドツール
- グラデーションツール ※SVGでの表示と差が出る場合があります
Canvasに変換可能なInkscapeの機能
以下のツールで描かれたものをCanvasに変換することができます。
- 矩形ツール
- 星形ツール
- らせんツール
- 鉛筆ツール
- ペンツール
- カリグラフィツール
※グラデーションは現在未対応です
免責事項
- 本サイトの利用の結果生じた、いかなる損害にも一切責任を負わないものとします。
- 本サイトの内容の変更、一時停止、終了等によって生じた、いかなる損害にも一切責任を負わないものとします。