`

html5-canvas

阅读更多

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(英文版)

 


2.基本的动画:

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

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

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,宽,高
    })

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


3.升级需求:

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

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


4.让画布里的图形变成可以控制的对象:

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

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

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

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

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

 /**
     * 精灵对象,类似flash(ActionScript3.0)中的精灵.
     * 所有的动画元素都必须继承自此对象,继承之后自动拥有move方法和速度属性
     * 每个动画元素都必须拥有一个自己的特殊的draw()方法的实现,这个方法用来在渲染每一帧的时候指定自己如何呈现在canvas帧画布上
     * 注意这个所谓的"帧画布"不是指原生的canvas元素,而是指下面定义的一个Canvas对象,此对象的意义就是一个帧,它负责把需要在这一帧上呈现的
     * 图形画在canvas上,然后每一帧开始的时候都会清除上次画的,类似flash中的帧概念
     *
     * 
     */
    var Sprite=function(){
        this.speed={
            x:1,
            y:1
        }
    }
    Sprite.prototype={
        /**
         *每个精灵都必须有自己的draw实现
         */
        draw:function(){

        },
        /**
         *无需单独实现,通用的动画函数
         */
        move:function(){
            this.x+=this.speed.x;
            this.y+=this.speed.y;
            if(this.childs!=null&&this.childs.length>0){
                for(var i=0;i<this.childs.length;i++){
                    this.childs[i].speed=this.speed;
                    this.childs[i].move();
                }
            }
        },
        /**
         *向此精灵添加一个子精灵
         */
        appendChild:function(sprite){
            if(this.childs==null) this.childs=[]
            this.childs.push(sprite)
        },
        /**
         *渲染子精灵
         */
        drawChild:function(){
            if(this.childs!=null&&this.childs.length>0){
                for(var i=0;i<this.childs.length;i++){
                    this.childs[i].draw();
                }
            }
        }
    }

下面定义一个帧的对象,我们将其命名为:Canvas.

/**
     *帧对象,每隔一段时间重画自己一次,类似flash中的帧概念
     *原理就是每到一定时间就清除canvas,然后调用当前帧里的所有的动画元素的draw()方法,将所有动画元素按照新的配置重画
     *从而生成动画,之后程序无需关心元素的重画,只需要调整元素属性即可,这个对象会自动管理元素的渲染
     *
     */
    var Canvas=function(){
        this.interval=null;
        this.sprites=[]
    }
    /**
     *
     */
    Canvas.prototype={
        /**
         * 开始动画
         */
        begin:function(){
            this.interval=setInterval((function(param){
                return function(){param.render();}
            })(this),20);
        },
        /**
         *渲染
         */
        render:function(){
            //    M.trace(this.sprites.length)
            this.ctx.clearRect(-800, -800, 1600, 1600)
            for(var i in this.sprites){
                if(typeof(this.sprites[i])=="function") continue;
                this.sprites[i].draw();
            }
        },
        /**
         *添加动画元素
         */
        addSprite:function(name,sprite){
            this.sprites[name]=sprite;
        },
        /**
         * 停止动画
         */
        stop:function(){
            clearInterval(this.interval)
        },
        clear:function(){
            for(var i in this.sprites){
                if(typeof(this.sprites[i])=="function") continue;
                if(this.sprites[i].x>800&&this.sprites[i].y>800){
                    delete this.sprites[i]
                }
            }
        }
    }

上面两个对象:精灵和帧.是本文讨论中的重点,有了他们,我们就可以开始组建我们的高级动画程序了.


5.开始我们的动画之旅吧:

基础有了,那我们就开始构建动画吧,首先注意上面两个对象,其中的精灵并不是真实的对象,而只是提供一个类似接口的东东,如果我们想构建动画的话,我们需要构建一个继承自精灵的真正的对象.

下面,我们构建一个圆环对象,然后实例化多个圆环对象,之后控制这些实例的运作:

 /**
     * 圆对象
     *
     * @param {Content2d} 一个canvas实例
     * @param {number} 初始x坐标
     * @param {number} 初始y坐标
     * @param {number} 半径
     * @param {json} 配置信息
     */
    var Circle=function(ctx,x,y,radius,config){
        this.ctx=ctx;
        this.x=x;
        this.y=y;
        this.radius=radius;
        this.config={
            strokeStyle:"#000",
            lineWidth:"1"
        }
        M.dom.mixin(this.config, config)
    }
    Circle.prototype=new Sprite();
    /**
     *draw方法的实现
     */
    Circle.prototype.draw=function(){
        this.ctx.beginPath();
        this.ctx.lineWidth = this.config.lineWidth;
        this.ctx.strokeStyle =this.config.strokeStyle;
        this.ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true)
        this.ctx.stroke();
        this.drawChild();
    }

这就是一个基础的圆环的对象,当然你可以给它添加其他任何属性和方法来使它看起来和动起来像一个真正的"对象"(智能对象?)

下面是重要的一步,通过这一步我们在画布上产生100个圆环,它们的位置会是随机的,而且它们向着不同的方向前进:

首先,我们初始化我们的动画程序:

    var ctx=$("canvas").getContext('2d');
    var can=new Canvas();
    can.ctx=ctx;
    can.begin();//开始渲染
    setInterval(function(){
        for(var i in can.sprites){
            if(typeof(can.sprites[i])=="function") continue;
            can.sprites[i].move()
        }
    },20)//这里就是帧速了,这里是50帧每秒

然后我们创建100个圆环:

    for(var i=0;i<100;i++){
        var circle=new Circle(ctx,0,0,m.random(30))
        circle.speed={x:Math.random(4),y:Math.random(4)}
        can.addSprite(i, circle)
    }

如果此时打开此网页,你会发现一百个圆环从原点处开始向右下角移动了.速度不同,方向不同,俨然一群小生命.俨然一群真正的对象.

具体原理,请揣摩源代码:


6.其他

我在程序里还添加了一个特性,让精灵有了层级的概念,类似flash中的剪辑,当然还很不完善,只是做个演示,这里也就不介绍如何使用了,回头我还要好好修改一下,让精灵变成影片剪辑的概念.这样才能创作出更加复杂的动画

回头等先做个游戏演示一下.canvas看起来简单,其实要想做出大型的东西来还是需要好好思考的.

分享到:
评论
1 楼 woshifeixiaochuan 2012-01-12  
很不错,学习了,谢谢

相关推荐

    HTML5-Canvas点击泡沫横飞特效.rar

    HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar ...

    HTML5-Canvas五彩纸屑飘落动画特效.rar

    HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas...

    文字粒子效果html5-canvas-side-文字.rar

    在这个“文字粒子效果html5-canvas-side-文字.rar”压缩包中,包含的项目是一个利用Canvas API创建的文字粒子效果示例。这种效果常用于网站背景、动态头像、艺术字展示等,可以给用户带来视觉上的冲击力和趣味性。 ...

    html5-canvas-mouse-ink

    "html5-canvas-mouse-ink"这个项目显然与Canvas有关,特别是涉及到了鼠标交互和动画效果,这通常是用来创建某种动态视觉效果,比如跟随鼠标移动的墨迹效果。 在HTML5 Canvas中,`&lt;canvas&gt;`元素是核心,它是画布,而...

    html5-Canvas

    html5-Canvas

    Html5-canvas之图片添加马赛克

    在现代Web开发中,HTML5的Canvas API是一个强大的工具,它允许开发者在浏览器端进行动态图形绘制和处理。本文将深入探讨如何利用HTML5 Canvas实现图片的马赛克效果,这是许多网页应用、照片编辑器和游戏中的常见功能...

    Html5-Canvas 贪吃蛇

    HTML5 Canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript代码动态地画出各种形状、图像和动画。这个“Html5-Canvas 贪吃蛇”项目是利用HTML5的Canvas技术和jQuery库来实现的经典游戏——贪吃蛇。下面...

    html5-canvas-loader.rar

    这个"html5-canvas-loader.rar"文件很可能包含了一个使用HTML5 Canvas技术实现的加载器示例。让我们深入探讨HTML5 Canvas以及如何使用它来创建加载器。 HTML5 Canvas是一个基于矢量图形的画布元素,通过JavaScript ...

    Html5-canvas-v2.zip

    这个"Html5-canvas-v2.zip"压缩包文件显然包含了一个关于HTML5 Canvas的连线题,旨在帮助学习者深入理解和掌握Canvas API的使用。 HTML5 Canvas是一个基于矢量图形的画布,通过JavaScript来操作。它提供了大量的...

    html5-canvas-web-图片涂鸦

    "html5-canvas-web-图片涂鸦"这个主题涉及到的知识点主要集中在如何利用HTML5的Canvas API来实现图片的涂鸦功能。 1. **Canvas API基础** HTML5的Canvas是一个基于矢量图形的画布,通过JavaScript来控制。它提供了...

    html5-canvas-3d-earth-rotate.zip

    【标题】"html5-canvas-3d-earth-rotate.zip" 涉及的主要知识点是HTML5中的Canvas API以及3D地球旋转效果的实现。HTML5 Canvas是一个强大的绘图工具,允许开发者在网页上进行动态图形绘制,为网页带来了丰富的交互性...

    html5-canvas-3d-line-avatar.zip

    这个"html5-canvas-3d-line-avatar.zip"压缩包显然包含了一个使用HTML5 Canvas实现3D线框头像的示例项目。在这个项目中,我们将探讨HTML5 Canvas的基础知识、3D渲染的基本原理以及如何利用JavaScript来创建动态的3D...

    html5-canvas-rabbit-run-games-code

    在这个"html5-canvas-rabbit-run-games-code"项目中,我们关注的是一个基于Canvas技术开发的3D兔子跑酷游戏,该游戏既适用于手机,也适用于个人电脑,展示了HTML5 Canvas的强大功能和跨平台兼容性。 首先,HTML5 ...

    html5-canvas-border-pixel-progressbar

    在"html5-canvas-border-pixel-progressbar"这个项目中,关键在于利用Canvas的`strokeStyle`属性来设置边框颜色,并使用`beginPath()`、`moveTo()`、`lineTo()`、`stroke()`等方法来绘制边框。这些方法配合起来可以...

    html5-canvas-15-clock.zip

    "html5-canvas-15-clock.zip"这个压缩包很可能包含了一个关于如何使用HTML5 Canvas实现数字时钟的示例项目。在这个项目中,我们将深入探讨HTML5 Canvas API以及如何利用它来构建一个实时更新的时间显示。 首先,...

    Html5-Canvas-JS.pdf

    这本书“Html5-Canvas-JS.pdf”显然是一个专注于教授HTML5 Canvas API和JavaScript结合使用的教程。下面将详细讨论HTML5 Canvas的基本概念、重要特性、以及如何通过JavaScript来实现互动效果。 1. HTML5 Canvas基本...

    HTML5-Canvas线条背景动画.rar

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上绘制图形,创建动态的、交互式的视觉体验。这个“HTML5-Canvas线条背景动画.rar”文件显然包含了一个使用Canvas API实现的JavaScript动画效果。下面...

    html5-canvas 涂鸦

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。"html5-canvas 涂鸦"这个主题,正是围绕使用Canvas API来实现一个简单的在线涂鸦板应用。在这个应用中...

    ec-canvas动态加载

    EC-Canvas是阿里云ECharts团队推出的一种专为移动端设计的绘图库,它基于HTML5的Canvas元素,用于在移动设备上展示丰富的数据可视化效果。EC-Canvas动态加载是其核心特性之一,允许开发者在运行时根据需要加载图表,...

    Html5-Canvas+JavaScript 绘图参考手册

    本手册提供Html5--Canvas标签绘图的完全参考; 其中包括标准函数,数据结构及样式枚举等元素的使用说明; 注明了Html5-Canvas中文教程、源码、样例的资源地址;以及函数参考的日文网站;但是本手册只做为开发人员参考...

Global site tag (gtag.js) - Google Analytics