Ai Canvas es un plugin para Adobe Illustrator que permite exportar los trabajos realizados en este programa a un elemento canvas de HTML5. El plugin está disponible tanto para Windows como para OS X. Para instalarlo tan sólo hay que extraer el plugin en la carpeta de plugins de Adobe Illustrator. Una vez lo tenemos instalado podemos crear una figura como la siguiente

y exportarla accediendo al menu "Fichero>Exportar" con la opción <canvas> (*.HTML). El fichero html contiene un elemento canvas con todo el código -similar a éste- para generar la imagen que acabamos de exportar.

ctx.beginPath();
ctx.moveTo(16.1, 0.0);
ctx.bezierCurveTo(9.0, 0.0, 2.9, 4.7, 0.8, 11.2);
ctx.bezierCurveTo(9.2, 13.7, 15.3, 21.4, 15.3, 30.6);
ctx.bezierCurveTo(15.3, 31.2, 15.3, 31.7, 15.3, 32.3);
ctx.bezierCurveTo(15.6, 32.3, 15.8, 32.3, 16.1, 32.3);
ctx.bezierCurveTo(25.1, 32.3, 32.3, 25.1, 32.3, 16.1);
ctx.bezierCurveTo(32.3, 7.2, 25.1, 0.0, 16.1, 0.0);
ctx.closePath();
gradient = ctx.createLinearGradient(-203.8, 16.1, 441.7, 16.1);
gradient.addColorStop(0.00, "rgb(255, 84, 152)");
gradient.addColorStop(0.08, "rgb(255, 83, 120)");
gradient.addColorStop(0.15, "rgb(255, 81, 87)");
gradient.addColorStop(0.22, "rgb(255, 103, 86)");
gradient.addColorStop(0.29, "rgb(255, 124, 85)");
gradient.addColorStop(0.37, "rgb(255, 184, 86)");
gradient.addColorStop(0.44, "rgb(255, 244, 87)");
gradient.addColorStop(0.51, "rgb(216, 249, 84)");
gradient.addColorStop(0.58, "rgb(178, 255, 80)");
gradient.addColorStop(0.67, "rgb(130, 229, 167)");
gradient.addColorStop(0.75, "rgb(81, 203, 255)");
gradient.addColorStop(0.80, "rgb(74, 138, 255)");
gradient.addColorStop(0.86, "rgb(67, 73, 255)");
gradient.addColorStop(0.93, "rgb(121, 70, 255)");
gradient.addColorStop(1.00, "rgb(174, 67, 255)");
ctx.fillStyle = gradient;
ctx.fill();

El plug-in también proporciona opciones para la programación de animaciones y eventos, lo que puede facilitar bastante la creación de aplicaciones interactivas basadas en el elemento canvas.

Ai Canvas » »