canvas教程

Canvas 技巧

字号+ 作者:H5之家 来源:H5之家 2015-09-08 17:00 我要评论( )

原文地址: http://insideria.com/2010/09/canvas-tricks---3d-link-list.html jQuery博客里一个新增小节的内容是关于Canvas技巧的。 HTML5之中最令我兴奋的一个

时间: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标签云就此诞生了。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • 学习慕课网canvas倒计时实例笔记

    学习慕课网canvas倒计时实例笔记

    2017-04-30 14:01

网友点评
v