int*_*tar 12 javascript svg raphael html5-animation
我刚刚使用Canvas开始了一个项目.但我需要的一件事就是跟踪可移动的,可点击的盒子,如下例所示:http://raphaeljs.com/graffle.html所以我想知道Raphael-js + SVG会不会更好.
你会用哪个？为什么？
sle*_*man 23
这个答案从我对另一个问题的回答中复制而来.但OP随后改变了问题,因此这个答案变得不那么重要了.恕我直言,它与这个问题更相关,所以这里是:
想想canvas和svg之间的区别,就像Photoshop和Illustrator(或者你的OSS人员的Gimp和Inkscape)之间的区别.一个处理位图和另一个矢量艺术.
使用画布,由于您使用位图绘图,因此可以轻松涂抹,模糊,刻录,躲避图像.但由于它是位图,因此您无法轻松绘制线条,然后决定重新定位线条.您需要删除旧行,然后绘制一个新行.
使用svg,由于您正在绘制矢量,因此您可以轻松地移动,缩放,旋转,重新定位,翻转图形.但由于它是矢量,因此无法根据线条粗细轻松模糊边缘,也无法将红色圆圈无缝融合成蓝色方块.您需要通过在对象之间绘制中间多边形来模拟模糊.
有时他们的用例重叠.例如,很多人使用canvas来做简单的线条图并在javascript中跟踪对象作为数据结构.但实际上,它们都有不同的用途.如果你试图在画布上用纯javascript实现通用矢量绘图,我怀疑你比使用svg更快,这很可能是在C中实现的.
小智 5
有几件事需要决定 - 你想让你的东西在移动浏览器中工作吗？SVG(Raphael)不会在android上工作(不知道iphone).相反,如果你想要的东西适用于旧版本的Internet Explorer,画布可能无法工作(不确定ExCanvas是否支持IE6),但SVG在某种程度上有效(Raphael支持IE6).
另外,你是在做动画/绘画,还是你正在做一个可能需要诸如按钮,滑块,标签容器,列表,网格等内容的完整应用程序.
如果您正在创建一个完整的应用程序,并且您希望它也适用于移动设备,您可以查看dojo工具包,特别是dojox.gfx和其他图形化dojox库:http: //archive.dojotoolkit.org/nightly/dojotoolkit/ DojoX中/
dojox.gfx是一个支持多个后端的矢量图形库:canvas,SVG,甚至是silverlight.这是一篇将其与raphael进行比较的文章:http://www.lrbabe.com/？p = 217
还可以查看cake.js以获取画布的独立场景图库:http: //code.google.com/p/cakejs/ 并查看processingjs.