看到微软发布AI转Canvas的illustrator插件,今天来实验一下。我的测试不是官方示例,因为我比较相信自己测试的结果。如果想了解官方原文请点击这里查看

第一步,下载插件 下载地址

第二步,将插件安装到对应的illustrator plugin目录下,具体步骤网上教材很多。安装好插件后继续;

第三步,下面的图形是来自网上的一张矢量图,有一些颜色的渐变和简单的线条,如图:

原图

第四部,在illustrator中选中矢量图形:

post2

选择“文件” —— “导出”——“Canvas.html”选好路径后点击确定;

第五步,在支持html5的浏览器中打开转换后的文件,结果还是相当不错的,如图:

post3

是不是所有图形都能完美支持呢?还是要多多尝试,这里不一一赘述了,某些图形还是存在问题的,往下看:

other

左侧的是原图,右侧是转换后的图形,鼻子和嘴里的阴影渐变出现问题。

结论,对于简单的图形,Ai2Canvas插件可以完美支持,对于复杂的图形会稍有问题。我们写Cancas图形最头疼的就是坐标。用illustrator工具直观且熟悉,确实减少很多工作量。对于部分的不完美微软可能以后会更新插件,现在只能对导出的Cancas稍加修改了。