好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

htmlcanvas与小丑。_html/css_WEB-ITnose

介绍

  以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后,Web动画就一下子从云端跌落到了地面??任何一个Web程序员都可以轻易的用画布(Canvas)技术+JavaScript来开发出各种动画效果。

  而文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包。它们都是开源的。

  我们需要了解Canvas中的几个API,然后使用需要的动画参数,就能制作出这个有趣又能响应你的动作的Web动画。把鼠标放到上面的小丑脸上,然后移开,看看会发生效果。

基本结构

KineticJS首先是要绑定到HTML页面上的一个DOM容器元素上,比如最常用的 标签。浏览器最终显示的就是这些用户层的叠加效果。

绘制界面

现在我们开始用Kinetic制作我们的画面。

Kinetic绘图的基本的流程可以如下图所示:

首先是创建一个HTML5页面,在里添加对Kinetic库的引用:

   

在中添加一个用于绑定到Kinetic用于创建舞台的容器,比如说可以是个 :

查看更多关于htmlcanvas与小丑。_html/css_WEB-ITnose的详细内容...

  阅读:32次