illustratorからパスデータをcanvasに描画する方法

イラレのパスをcanvasのパスとして描画するメモです。 イラレのプラグインを入れれば簡単にできます。

プラグインをダウンロード

ググるとCS5まで対応したプラグインはすぐ出てきます。 [CS5までの方はこちら] http://www.visitmix.com/labs/ai2canvas/index.html

自分のはCS6なので、CS6用のプラグインを探していたのですが、調べているうちに、上記のアップデート版の記事を発見しました。 [CS6以上はこちら] http://blog.mikeswanson.com/post/29634279264/ai2canvas

CS5.5はどうすんだろと思いつつ、上記のプラグインをインストールします。

イラレで書き出す

イラレでパスを描き、[ファイル>書き出し]を選ぶとcanvasという項目が現れます。

書き出すと、htmlを生成してくれるので、中をのぞくとcanvasを記述してくれちゃってます。

これで、複雑なパスをclip()して画像のマスクを作ったり、線をアニメーションさせてたりできますね。

【宣伝】

最近canvas周りの技術について本を書きました。 上記の方法も使い、イラレのパスをcanvasでアニメーションさせる方法を書いています。