Radi: Mac上的HTML5可视化网页编辑器

标签: 工具 HTML5 Radi | 发表时间:2011-08-03 16:49 | 作者:pestwave 虫虫
出处:http://www.36kr.com


Radi
是一个Mac平台上的网页制作工具,以用来制作各种可视化内容,比如图片、动画、视频、曲线图、JavaScript等。

为HTML5度身打造

有了Radi,即便不会写代码你也可以制作HTML5网页, Radi从一开始就可以让你充分利用HTML5的功能,比如多媒体支持和即时图案等,对video 和canvas 元素的支持非常好。

Radi另一个独特之处就是会把可编辑内容和用来渲染内容的HTML元素分开。当你制作向量图形和动画的时候无需 立刻决定是否以视频文件或动画的形式来展现。比如当你创建了一个复杂的向量动画后,发现在手机上渲染太慢,你可以通过将部分内容欲渲染成视频文件进行加速,在这种情况下,你就可以通过点击video元素把内容层拖到里面即可。

以下是通过三种不同技术渲染同一匹马的例子:

  1. <canvas>
  2. <video>
  3. 动画

方法一完全通过canvas向量图形元素渲染。

方法二通过video元素和一个模糊过滤器完成。

方法三和一一样,但通过按钮来控制风向。

上面的网页都是通过Radi制作的。

简单的向量图形

智能手机和平板电脑的兴起对网页内容提出了新的挑战,而向量图可以适应各种大小的显示屏。

Radi支持canvas网页图形标准,所以你可以对向量图和位图进行自由组合。

 

网页视频唾手可得

由于浏览器支持的视频格式不统一,所以通过HTML5发布视频并不容易。但Radi支持多种视频格式(H.264,WebM / VP8和Ogg Theora)。

流畅的动画

在Radi中实现动画效果很简单,打开一个图层,点击时间线上的帧,修改图层属性既可以自动生成关键帧。Radi还有一个浮动的曲线编辑器,可对动画时间进行更精确的控制。

精美的视频效果

Conduit是一个强大的可视化环境,可用来生成即时视频过滤器和其他效果。Radi提供了多种使用Conduit的方法。

Radi和Conduit充分利用电脑中的图形编程单元(GPU),让即时效果速度更快,无需等待即可完成过滤器渲染。

有趣的图形编程

HTML5里面的Canvas API可用来制作互动图形。只要你掌握了JavaScript,就可以制作各种生动的图形。

Radi的开发者是Pauli Olavi Ojala。该应用目前在测试阶段,你可以在这里免费下载。

除非注明,本站文章均为原创或编译,转载请注明: 文章来自36氪
新浪微博 腾讯微博 QQ空间 人人 九点 开心 网易微博 腾讯朋友 搜狐微博 Facebook Twitter LinkedIn email

相关 [radi mac html5] 推荐:

Radi: Mac上的HTML5可视化网页编辑器

- 虫虫 - 36氪
Radi是一个Mac平台上的网页制作工具,以用来制作各种可视化内容,比如图片、动画、视频、曲线图、JavaScript等. 有了Radi,即便不会写代码你也可以制作HTML5网页, Radi从一开始就可以让你充分利用HTML5的功能,比如多媒体支持和即时图案等,对video 和canvas 元素的支持非常好.

新的 Mac Mini

- delphij - Gea-Suan Lin&#39;s BLOG
為了螢幕的問題弄得相當疲倦 XD. 這幾天可以在一般的店家通路買到新的 Mac Mini,但沒事先做好功課,配上 Dell U2711 讓人碰了不少壁…. 買完 Mac Mini 後第一個想法是用 DVI & USB KVM 同時接 PC 與 Mac Mini,於是順便買 ATEN CS682,裝上去後發現只能支援到 1920×1080… 想想算了,其他地方也還用的到.

Mac迅雷正式上架Mac App Store

- Woooon - cnBeta.COM
今天在Mac App store中赫然发现Mac迅雷的身影. 摘录信息如下:Thunder For Mac 是基于Mac平台的下载软件,支持P2SP,BT和eMule下载协议;高速可靠的数据传输和简约的界面操作,让下载更轻松.

ProVoc – 背!单!词![Mac] | 小众软件 > Mac

- Richard - 小众软件
长孙二狗买过的单词书如果撕开用来擦屁股的话,一年多都够用了. 他把原因归咎于自己天天玩电脑,遂在 Mac 上装专业背单词软件 ProVoc. 功能强大,便于使用,网上还有免费词库下载. 过了一年,二狗还是没记住几个单词,电脑里面的词库倒是够他看几个世纪的了. 下载: 官方 | 下载 | 来自小众软件.

Mac QQ V1.1.1 发布

- KNocTis - cnBeta.COM
1.解决发图片视频崩溃问题;2.修正部分用户反馈bug;3.支持10.5系统下的视频;. 4.大幅优化各个环节的资源使用. 新增视频功能、自定义表情、讨论组、代理登陆等功能.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.