Ai->Canvas: ai ファイルを HTML5 Canvas へ変換する

Ai->Canvasは、aiファイルを HTML5 Canvas を使った（JavaScript を含む）HTMLファイルとして出力する Illustrator 用のプラグイン。

IllustratorファイルをCanvasタグで出力する「Ai->Canvas」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

Contents

動作環境

Adobe Illustrator CS5 で紹介されているが、CS3/CS4 でも大丈夫らしい。
出力されたファイルは、Internet Explorer 9, Firefox 3.6, Chrome 6, Safari 5, and Opera 10 以上で動作するよう。

MIX Online:Ai to Canvas Plug-In

インストール

ダウンロードしたファイルを解凍すると、Ai2Canvas.aip というプラグインがあらわれるので、下記に移動します。

/Applications/Adobe Illustrator CS3/Plug-ins.localized/Ai2Canvas.aip

MIX Online:Ai to Canvas Plug-In

つかいかた

チュートリアルの一部をCS3でやってみる。

フリーのロケット画像を、SVGフォーマットでダウンロードして利用する。
レイヤーの名前を「rocket();」に変更する。
エクスポート機能に「Canvas（HTML）」という項が追加されているので、これで出力する。

出力されたHTMLファイル

3714 byte pitr_Rocket_icon.html

<!DOCTYPE html>
<!-- Created with Ai->Canvas Export Plug-In Version 1.0 (Mac) -->
<!-- By Mike Swanson (http://blogs.msdn.com/mswanson/)        -->
<!-- and MIX Online  (http://visitmix.com/)                   -->
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>pitr_Rocket_icon</title>
  <script>
    function init() {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      rocket(ctx);
    }
    function rocket(ctx) {
      // rocket/defs
      ctx.save();
      // rocket/defs/perspective4876
      ctx.save();
      // rocket/defs/perspective4876/
      ctx.save();
      // rocket/base
      ctx.restore();
      ctx.restore();
      // rocket/base/
      ctx.save();
      // rocket/layer1
      ctx.restore();
      // rocket/layer1/path3297
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(22.8, 76.1);
      ctx.lineTo(46.1, 98.7);
      ctx.bezierCurveTo(76.0, 73.6, 114.1, 51.7, 116.2, 3.0);
      ctx.bezierCurveTo(67.5, 6.6, 45.9, 44.8, 22.8, 76.1);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 255, 0)";
      ctx.fill();
      ctx.lineWidth = 6.0;
      ctx.lineJoin = "round";
      ctx.stroke();
      // rocket/layer1/path3301
      ctx.beginPath();
      ctx.moveTo(101.3, 28.1);
      ctx.bezierCurveTo(98.6, 31.0, 94.0, 31.1, 91.2, 28.3);
      ctx.bezierCurveTo(88.3, 25.6, 88.3, 21.0, 91.1, 18.2);
      ctx.bezierCurveTo(91.1, 18.2, 91.1, 18.2, 91.1, 18.2);
      ctx.bezierCurveTo(93.8, 15.3, 98.4, 15.2, 101.2, 17.9);
      ctx.bezierCurveTo(104.1, 20.7, 104.1, 25.2, 101.3, 28.1);
      ctx.bezierCurveTo(101.3, 28.1, 101.3, 28.1, 101.3, 28.1);
      ctx.closePath();
      ctx.fillStyle = "rgb(0, 127, 127)";
      ctx.fill();
      ctx.lineWidth = 3.6;
      ctx.stroke();
      // rocket/layer1/path3303
      ctx.beginPath();
      ctx.moveTo(87.2, 42.7);
      ctx.bezierCurveTo(84.4, 45.6, 79.8, 45.7, 77.0, 43.0);
      ctx.bezierCurveTo(74.2, 40.2, 74.1, 35.7, 76.9, 32.8);
      ctx.bezierCurveTo(76.9, 32.8, 76.9, 32.8, 76.9, 32.8);
      ctx.bezierCurveTo(79.7, 29.9, 84.2, 29.8, 87.1, 32.6);
      ctx.bezierCurveTo(89.9, 35.3, 89.9, 39.9, 87.2, 42.7);
      ctx.bezierCurveTo(87.2, 42.7, 87.2, 42.7, 87.2, 42.7);
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
      // rocket/layer1/path3305
      ctx.beginPath();
      ctx.moveTo(72.8, 57.6);
      ctx.bezierCurveTo(70.0, 60.4, 65.5, 60.5, 62.6, 57.8);
      ctx.bezierCurveTo(59.8, 55.1, 59.8, 50.5, 62.5, 47.6);
      ctx.bezierCurveTo(62.5, 47.6, 62.5, 47.6, 62.5, 47.6);
      ctx.bezierCurveTo(65.3, 44.8, 69.9, 44.7, 72.7, 47.4);
      ctx.bezierCurveTo(75.5, 50.2, 75.6, 54.7, 72.8, 57.6);
      ctx.bezierCurveTo(72.8, 57.6, 72.8, 57.6, 72.8, 57.6);
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
      // rocket/layer1/path3307
      ctx.beginPath();
      ctx.moveTo(22.8, 76.1);
      ctx.lineTo(3.0, 83.0);
      ctx.bezierCurveTo(7.3, 70.3, 14.0, 53.9, 23.2, 48.3);
      ctx.bezierCurveTo(29.2, 44.7, 43.5, 47.4, 43.5, 47.4);
      ctx.lineTo(22.8, 76.1);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 0, 0)";
      ctx.fill();
      ctx.lineWidth = 6.0;
      ctx.stroke();
      // rocket/layer1/path3309
      ctx.beginPath();
      ctx.moveTo(46.8, 98.0);
      ctx.lineTo(40.6, 117.9);
      ctx.bezierCurveTo(53.1, 113.3, 69.3, 106.0, 74.6, 96.7);
      ctx.bezierCurveTo(78.0, 90.5, 74.8, 76.3, 74.8, 76.3);
      ctx.lineTo(46.8, 98.0);
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
      ctx.restore();
      ctx.restore();
    }
  </script>
 </head>
 <body onload="init()">
   <canvas id="canvas" width="120" height="121"></canvas>
 </body>
</html>

配置した画像ファイルの扱い

png ファイルを配置したところ、下記のように埋め込み画像として定義されました。
画像ファイルも HTML とともに出力されました。

<!DOCTYPE html>
<!-- Created with Ai->Canvas Export Plug-In Version 1.0 (Mac) -->
<!-- By Mike Swanson (http://blogs.msdn.com/mswanson/)        -->
<!-- and MIX Online  (http://visitmix.com/)                   -->
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>pitr_Rocket_icon.svg.thumb</title>
  <script>
    function init() {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      draw(ctx);
    }
    function draw(ctx) {
      // 1/
      ctx.save();
      ctx.drawImage(document.getElementById("image1"), 0.0, 0.0);
      ctx.restore();
    }
  </script>
 </head>
 <body onload="init()">
   <canvas id="canvas" width="96" height="97"></canvas>
   <img alt="" id="image1" style="display: none" src="pitr_Rocket_icon.svg.thumb1.png" />
 </body>
</html>