Blog

Illustratorで書きだしたSVGの要素をCanvasでの記述に置き換えてみよう

nino-eye

Illustratorで書きだしたデータを、Canvasで利用する方法として、
SVG形式で書きだした上で、Canvasでの記述方法に変更して利用するという方法という方法が、1つ考えられます。
さらにCanvasでの記述方法に変更する方法には、JSのプラグインを利用する方法も公開されています。
ただ、より自由に扱うためには、
SVGとCanvasでの記述方法の関係性について理解する必要があると思いましたので、
実際にやってみました。

↓作ってみたもの
DEMO

方法

円の場合

 

直線の場合

 

多角形の場合

 

ベジェ曲線の場合

上記のIllustratorでSVGを書き出した場合、ベジェ曲線のコードは上記のように書き出されると思いますが、
このままでは見づらいので、下記のように、改行したり、スペースを入れたりすると書き換えがしやすくなります。

Illustratorでは、マイナスの値がある場合に、コンマとスペースが省略されるため、気をつけて下さい。
SVGのMが、CanvasのmovoToに、
SVGのCおよびcが、CanvasのbezierCurveToに相当します。
小文字の場合、相対パスとなり、Canvasではそのまま利用できないので、それ以前の座標をプラスする必要があります。

参考サイト

HTML5 Canvas Tutorials
Canvasリファレンス – HTML5.JP
Paths – SVG | MDN

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ