html5怎么写动态图形设计( 二 ) _图形

Canvas 对象的属性
height 属性
画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300 。
width 属性
画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300 。
3.html5用canvas怎么实现动画效果方法/步骤
素材准备，基本框架的建立。
这里我们让一个有字的图片从左到右运动起来。
1.素材：图片一张。
2.框架的建立（如下图）
3.将图片素材引入网页。
4.定义canvas标签，获取canvas的上下文。
5.定义一个画图片的函数，使用canavs绘图API里面的drawImage来完成。
6.写一个更新的函数，因为我们要让他动起来，所以每时刻绘制的地方都不一样。注意：这儿要用clearRect，这个函数，主要是为了清空画布。
7.写定时函数，每隔0.2秒就更新一次，重新绘制。
我们来看看最终的效果和所有代码吧！
4.如何用HTML5 Canvas制作子画面动画最近一直在做canvas动画效果，发现canvas这个东西做动画不是不可以。
相对于flash，它太底层。如果有给力的编辑器或者给力的框架的话，它就能发挥出更大的威力。
于是决定自己写一个简单一点的动画框架，以便能更方便地构建出一些动画效果。我将分几个章节来讲述我这个小动画框架的实现：1.通用类的提取：动画对象与帧对象2.灵与肉的结合：便于拆卸的运动方程3.进度条的实现：canvas的图片预加载4.demo测试：通过一个demo测试框架这一节我们先来说说通用类的提取。
其实上一篇文章我已经用到了这种从flash借鉴来的思路：一个动画对象（类似flash中的元件），一个帧对象（类似flash中的帧）。动画就是在不断在当前帧上绘制每个动画对象来实现的。
有了这两个对象，再加上一些运动方法，我们就可以构建出动画来。首先我们先来看看动画对象Aniele：复制代码 /* *Aniele动画对象 *所有动画对象的始祖 */ var Aniele=function(){ this.img=new Image（)； //定义动画对象位置 this.loca={ x:300, y:300 } //定义动画对象的大小（可以实现缩放） this.dw; this.dh； //动画对象的速度属性 this.speed={ x:0, y:0 } //设置对象的透明度 this.alpha=1； //设置图像翻转，1为不翻转，-1为翻转 this.scale={ x:1, y:1 } //定动画对象的运动方法库 this.motionFncs=[]; } Aniele.prototype={ //添加运动方法 addMotionFnc:function (name,fnc) { this.motionFncs[name]=fnc； }，//删除运动方法 deleMotionFnc:function(name){ this.motionFncs[name]=null； }，//遍历运动方法库里的所有运动方法 countMotionFncs:function () { for (var i=0; i有了这个，我们就好似获得了flash里的一个元件，我们可以通过修改它的属性来随意改变它。那么帧对象呢？帧对象肩负着渲染的任务，并且管理所有动画对象：复制代码/**Render渲染对象*管理所有动画对象和渲染*参数：画布对象，画布上下文*/var Render=function (canvas,ctx) { //引入画布 this.canvas=canvas; this.ctx=ctx； //创建一个缓冲画布 this.backBuffer=document.createElement('canvas'); this.backBuffer.width=this.canvas.width; this.backBuffer.height=this.canvas.height; this.backBufferctx=this.backBuffer.getContext('2d')； //所有动画对象 this.aniEles=[];}Render.prototype={ //初始化画布int int:function () { clearInterval(this.sint); this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); this.backBufferctx.clearRect(0,0,this.backBuffer.width,this.backBuffer.height)； }，//设置开始渲染 begin:function () { this.lastFrame=(new Date()).getTime(); this.sint=setInterval((function(progra){ return function(){progra.render();} })(this),SECOND）； }，//主渲染方法 render:function （) { //在画布和缓存画布上清除历史帧 this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); this.backBufferctx.clearRect(0,0,this.backBuffer.width,this.backBuffer.height)； //保存当前的实时输出帧率this.ftp this.nowFrame=(new Date()).getTime(); this.ftp=1000/(this.nowFrame-this.lastFrame); this.lastFrame=this.nowFrame； //调用每个动画对象的运动方法 for (var i=0; i5.html5用canvas怎么实现动画效果方法/步骤素材准备，基本框架的建立。