效果和源码:(本代码使用了本人自己的js框架,自己修改代码的话,请务必引用我试用的框架,否则会出现错误)

(请务必试用非ie浏览器浏览,极力推荐Safari和chrome,其他浏览器运行速度堪忧)

http://www.beiju123.cn/blog/wp-content/uploads/2010/02/canvas-demo.html

1.什么是canvas:

引用Firefox开发者中心的一段话:<canvas> is a new HTML element which can be used to draw graphics using scripting (usuallyJavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of <canvas>implementations which we will see later in this tutorial.

注意,canvas主要是用来画图的,而不是注重动画,所以在canvas中没有帧的概念,没有精灵(Sprite)的概念,flash中的概念在canvas中很多都不存在.

canvas说白了,就是给js加了几个对象,多了几个方法.并不是一个独立的东西,应该说是JavaScript的一点点补充.就跟其他编程语言中的graphic对象差不多,提供了画基本图形和路径,图像,提供了颜色和样式管理.

更多关于canvas的基础,见https://developer.mozilla.org/en/Canvas_tutorial(英文版)

可能很多人会嚼的我这篇文章纯属多余,既然能够画图,那加上一个定时器不就是动画了嘛?

是的,如果你只是想在画布上画出一个圆或者矩形,然后让它动起来的话,那这么做无疑是可以得出结果的.代码也很简单,如下:

var x=0;
    var y=0;
    var ctx = document.getElementById('canvas').getContext('2d');
    setInterval(function(){
        ctx.clearRect(0,0,800,800);//清除画布某某个范围内的内容,参数分别为x,y,宽度,高度
        ctx.fillStyle = '#FFF'//设置颜色
        ctx.fillRect(x++,y++,50,50)//画一个矩形,参数为:x,y,宽,高
    })

效果就是一个方块在画布上向右下角移动.

动画往往不是如此简单,在flash里,复杂的动画里会包含很多元素,有剪辑,有精灵,他们之间还有包含关系,我们可以单独控制某个元素的移动,控制速度,控制属性.flash里有帧,我们可以在帧上放置元素,控制帧速.最重要的,做复杂的动画的时候,我们需要把每个元素抽象成一个完整的对象,例如:一个人对象啊,我们需要控制它走动,控制它攻击.

可是在canvas里面,图形并不是一个对象,在整个canvas元素里,有且只有只有一个画布的对象(多次创建的话,只会创建一个引用),如果想把里面的图形作为对象来控制的话,上面的动画方法就做不到了.这个时候,考虑一下flash的工作原理,我想出了如下的解决方案.

我们现在需要一种新的方法,这种方法可以让画布上的元素变成可以单独控制的对象.而画布上其实只有一个对象,怎么让它能承载多个动画对象呢?

我们想想flash的工作原理吧,flash中最基本的两个东西,一个是帧,一个是精灵(Sprite).下面我们就给我们的动画程序添加这两个概念.

首先是帧,我们通过一个定时器,每隔一段时间就重画一下画布,在这段时间里我们改变画布上的元素的位置,这样就是最基本的帧了.

然后现在问题就是如何控制画布上元素的属性呢?我们把画布上所有要用到的动画元素都抽象出来,每个元素都抽象成一个对象,这个对象拥有位置和大小,速度等信息.然后在每一帧重画画布的时候,我们遍历这些对象,调用它们自己的draw方法,让它们根据自己的属性把自己画到画布上.我们将这些元素统称为Sprite,也就是动画精灵.

现在,我们就可以控制这些动画元素了,因为它们都被抽象成了对象,可以有自己的属性和方法,他们都要实现一个接口.虽然在js中不存在接口的概念,但是我们要自己去衡量在每个扩展的精灵里是否都实现了接口的方法.因为这些方法都是必须的.我们把这个接口定义成如下的样子: (全文…)

canvas · flash · html5 · 动画

+ 按照惯例，demo在此独立浏览，这样显得更直观。

+ 以前做谷歌的小工具时，api里提供了一个很有用的函数，那就是在程序运行时可以使层动态随内容大小而变化，而且是平滑变换，在一些jquery的lightbox里也普遍有这种效果，看起来很酷的样子。

+ 下面我们就自己来实现一个这样的组件，没有参考其他资料，纯属自己瞎写。

+ 我觉得我这个方法很简单了，只需要在外边多套一个层就可以，而且可以容纳大量的文字（为什么这样说？因为如果只是单纯的图片，那调整起来简单多了，而如果有一大串文字的话，要变换两次才可以，因为如果你改变了宽度的话，字会被挤得高度增加，这里有两个方法来调整，一个是每次动画循环都更新最新的高和宽，另一种方法就是先变换，变换完后再检查一次，这次变化的只是高度，也就是调节两次，第一种方法效果好，但是每次都更新，自然加重了负担，第二种效果差点，但是性能好，而且也不是那么差）

+ 实现原理很简单，就是在外边放一个主体层，我们调整的就是这个层，我们首先把这个层设置一个很小的宽和高，然后设置其overflow为hidden，然后运行时判断里面内容的大小，再回来调整外部层的大小即可。

+ 本程序用到了YUI的一个动画函数和一个淘宝sns的jsonhtml对象，这个对象的作用是将一个用json形式表示的html转换成真正的html结构，可以使构造html的程序简洁清晰。

+ 主体从Tip开始,我将这个组件写成了单例的模式,也就是不用new就可以在任何地方使用,而且都指向一个对象,而且这个组件封装目前没优化,为了试验,里面很多东西都是直接改的,外部暴露的接口太少:

 var Tip=function(){
                    //直接返回一个json对象,这是一种js单例模式的实现
                return {
                    //初始化函数
                    init:function(options){
                        this.config={
                            container:null,//包装容器
                            style:{},//样式配置
                            data:{}
                        }
                        //样式配置
                        this.style={tip:null,tip_title:null,tip_pic:null,tip_bd:null}
                        //混合配置选项
                        mixin(this.config,options)
                        //初始数据
                        this.data={
                            //标题的数据
                            hd_data:this.config.data.hd_data==null?"没有描述":this.config.data.hd_data,
                            //图片数据,正常情况下应该是一个网址
                            pic_data:this.config.data.pic_data==null?"#":this.config.data.pic_data,
                            //主题内容数据
                            bd_data:this.config.data.bd_data==null?"没有描述":this.config.data.bd_data
                        }
                        //这是定义了一个加载的时候显示的滚动的gif的图像
                        this.loading_pic=new Image();
                        this.loading_pic.src="http://www.sj33.cn/sc/UploadFiles_6888/200803/20080320132838323.gif";
                        this.creatHtml();//调用html构造器
                    },

+ 关于为什么js写成这样,还有一些从某些库里学来的写法就不多解释了,注释也很清楚,这里就是初始化一些数据,用来给后面的程序处理.
(全文…)

js · YUI · 动态改变大小 · 动画 · 滑动