时间:2011-02-12 17:14
原文地址:
jQuery博客里一个新增小节的内容是关于Canvas技巧的。
HTML5之中最令我兴奋的一个特征,就是它包含了Canvas元素。 简而言之,Canvas元素使您能够以编程的形式,用JavaScript绘制位图格式的插图。 因此,仅仅使用JavaScript,您就可以在文本中添加变形效果,添加动画甚至制作游戏。
正如您所预料的那样,加入Canvas元素对于jQuery社区来说至关重要。 最后,您可以用网页(HTML)和JavaScript解决Flash之类的难题。heck,jQuery和Canvas是紧密联系的。
网上关于Canvas元素的例子有很多,您可以在以下网址查阅:
网址为:
除IE8及其更早版本的浏览器不能支持Canvas外, 其他的多种现在流行的浏览器(FireFox2.0+,Safari2.0+,Chrome,Opera和IE9)都能支持。 Canvas 技巧的系列文章就是为了让您能清晰地了解到,您能用Canvas来做些什么。 其中的一些技巧能为IE8及其较早版本的浏览器提供快倒搜索的支持,但是对其他许多浏览来说,还不能支持这个功能。
综上所述,您可以使用Canvas的一个技巧,将一系列的链接转化到一个3D Canvas云(Cloud)里。我是通过使用Go
at1000 Canvas标签云插件来完成这个任务的。您可以在如下网址找到这些代码:。
您可以从以下网址下载jQuery插件: 。为了达到这个效果,您必须了解以下三个方面:
制作一个新的HTML网页。 在您新制作的的网页的标头(HEAD)部分,添加以下指向jQuery和jquery.tagcanvas.js库的脚本引用。
请注意,Canvas元素里包含了一系列的链接。 您可以把这些链接改成任何类型的URL链接。
最后一个步骤就是添加以下Java脚本。 此代码将在页面加载的时候触发Canvas动画启动。 把脚本添加到页面标头(HEAD)元素之中。
上述的Java脚本区块内有下列参数可以修改:
Goat1000网址会为您提供额外11个可设置的参数的信息。
请保存网页。 您需要在能启用Canvas的浏览器(Chrome,Safari,Opera,FireFox或IE9 RC4或更高版本以上的浏览器)上面测试这项Canvas技巧。 看! 一个旋转的3D标签云就此诞生了。