4

JavaScript/Html5 Canvasを使用して作成したグラフィックデザインがあります。一部のグラフィックエディタでHtml5/Javascriptグラフィックスを使用する

はこちらをご覧ください:PhotoshopやIllustratorの優しい形式のいずれかで: http://yeda.us/js/logos.js

を今、私は彼がで作業することができ、いくつかの形式でグラフィックデザイナーに、このグラフィック要素を与える必要があります。

もちろん、私はスクリーンショットを撮ってそこから作業を開始できますが、後でもっと堅牢に使うことができるベクター形式でこのグラフィックが必要です。

上記のコードをグラフィックスに変換する方法はありますか?何とかそれをSVGに変換するのでしょうか?

+0

私は可能ではないと思います。 – noob

+2

私は方法に気づいていませんが、キャンバスは*ピクセルベース*なので、キャンバスイメージをSVGに変換することは実際には不可能です。 – pimvdb

+1

おかげさまで、pimvdb - そうです、キャンバスはピクセル化されていますが、この場合のキャンバスは、javascriptベクトルを表示するためにのみ使用されます。キャンバスからベクターへの変換よりもjavascriptからベクトルへの変換を探しています...申し訳ありませんが、私がこのことについて不明な点がある場合は – Talbatz

答えて

5

を保存実行します描画コマンドから出力されます。おそらくすべてを処理するわけではありませんが、単純な例でうまくいけばうまくいくはずです。

コードの該当するビットをleft textareasのいずれかに貼り付け、「do it」をクリックして、右側のテキストエリアからsvg出力をコピーします。

+0

これはトリックでした!どうもありがとう :-) – Talbatz

2

他の人がコメントしたように、Canvas - > SVG変換に役立つツールはありません。しかし、コードはあまり変わらない。あなたが与えたサンプルはかなり小さいので、あなたはSVGを生成し、あなたがRaphaël.jsのに投稿されたコードに変換するためにRaphaël.jsのを使用することができます。

http://raphaeljs.com/

UPDATE

もう少し詳細を

  1. はRaphaël.jsの
  2. はラインでスクリプトのラインを通過し、Raphaël.jsの中で同等を見つけようと含まれています。たとえば、あなたがやっているRGBカラーのものは、これを使用します。http://raphaeljs.com/reference.html#Raphael.rgb
  3. は、得られたJS
  4. はSVGを作成するHTML5のキャンバスと互換性のあるAPIを定義しSVGCanvasをチェック生成SVG
+0

ちょっと、これは可能な解決策のように思えます...詳細を教えてください。私はあなたが完全にあなたを理解していないことを認めなければならない – Talbatz

+0

確かに、私は不明なものを教えてください。 – Milimetric

+0

ありがとう!あなたの更新は不明確なものがすべてクリアされました:-) – Talbatz

関連する問題