こんにちは。

今日は、多少ニッチな話題かもしれませんが、
「Illustratorからcanvasのコードを生成するプラグイン」、AI2Canvas をご紹介します。

何が目的かというと、「画像上の複雑な線をHTML5のcanvasのパス（javascript）で描きたい」です。

え？描いてどうするの？という声が聞こえてくる感じがしますが、せっかくなので続けさせていただきます。

早速ですが、プラグインはこちらからダウンロードします。
ダウンロードしたzipファイルを解凍すると、readme.txtがありますので読みましょう。

ざっくり意訳すれば、
・プラグインファイルをイラストレータのインストールフォルダのプラグインフォルダに入れてね！
・チュートリアルもセットになっているからやってみてね！

ということが書いてあります。
指示に従ってプラグインファイルを、イラストレーターのプラグインフォルダに移動しました。

そして、イラストレータを起動します。

今回はサンプルとしてこの画像を使います。
マスクを付けたマネキンの画像です。
この、マスク部分をjsのコードで書くことを目標にします。

ペンツールで、マスクのパスを描いていきます。
もっと良い方法があるのかもしれませんが、とりあえずはこの方法で行きます。

描けましたね。
そうしたら、メニューのファイル-書き出し-書き出し形式…を選択します。

任意の場所に任意のファイル名で出力してください。
注意点として、日本語含む2バイト文字がパスに含まれると動作しないようです。
書き出しが終わると自動でブラウザが開きます。

見た目はOK。
コードを見てみましょう。

ちゃんとjavascriptのコードで描かれているようですね！
成功です！

ということで、以上、「Illustratorからcanvasのコードを生成するプラグイン」、AI2Canvasのご紹介でした。
何に使うの・・・？と言われそうなので、次々回くらいに活用方法のご紹介をする予定です。

最後までお読みいただき、ありがとうございました。