html5的⼀个例⼦源码
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" dir="ltr" lang="zh-CN">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src=""></script>
</head>
<body>
<canvas id="canvas" width="800" height="800" >
Fallback content, in case the browser does not support Canvas.
</canvas>
<canvas id="canvas1" width="200" height="300" >
Fallback content, in case the browser does not support Canvas.
</canvas>
</body>
</html>
<script>
if(M.isIE) alert("ie不⽀持canvas，请⽤chrome和Safari浏览,Firefox也可以，但是性能可能有问题")
/**
* 精灵对象，类似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();
}
}
}
}
/**
* 圆对象
*
* @param {Content2d} ⼀个canvas实例
* @param {number} 初始x坐标
* @param {number} 初始y坐标
* @param {number} 半径
* @param {json} 配置信息
*/
var Circle=function(ctx,x,y,radius,config){
<=ctx;
this.x=x;
this.y=y;
this.radius=radius;
strokeStyle:"#000",
lineWidth:"1"
}
M.dom.fig, config)
}
Circle.prototype=new Sprite();
/**
*draw⽅法的实现
*/
Circle.prototype.draw=function(){
this.drawChild();
}
/**
* 矩形对象
*
* @param {Content2d} ⼀个canvas实例
* @param {number} 初始x坐标
* @param {number} 初始y坐标
* @param {number} 宽
* @param {number} ⾼
* @param {json} 配置信息
*/
var Rect=function(ctx,x,y,width,height,config){
<=ctx;
this.x=x;
this.y=y;
this.width=width;
this.height=height;
fillStyle:"#000",
lineWidth:"1"
}
M.dom.fig, config)
}
Rect.prototype=new Sprite()
Rect.prototype.draw=function(){
this.drawChild();
}
/**
* 正⽅形对象
*
* @param {Content2d} ⼀个canvas实例
* @param {number} 初始x坐标
* @param {number} 初始y坐标
* @param {number} 边长
* @param {json} 配置信息
*/
var Square=function(ctx,x,y,size,config){
<=ctx;
this.x=x;
this.y=y;
this.width=size;
this.height=size;
fillStyle:"#000",
lineWidth:"1"
}
M.dom.fig, config)
}
html导航源码Square.prototype=new Rect();
/**
* 图形容器对象
*
* @param {Content2d} ⼀个canvas实例
* @param {number} 初始x坐标
* @param {number} 初始y坐标
* @param {number} 宽
* @param {number} ⾼
* @param {json} 配置信息
*/
var Img=function(ctx,img,x,y,width,height,config){
<=ctx;
this.img=img
this.x=x;
this.y=y;
this.width=width;
this.height=height;
}
M.dom.fig, config)
}
Img.prototype=new Rect();
Img.prototype.draw=function(){
this.drawChild();
//    stroke();
}
/
**
*帧对象，每隔⼀段时间重画⾃⼰⼀次，类似flash中的帧概念
*原理就是每到⼀定时间就清除canvas，然后调⽤当前帧⾥的所有的动画元素的draw()⽅法，将所有动画元素按照新的配置重画    *从⽽⽣成动画，之后程序⽆需关⼼元素的重画，只需要调整元素属性即可，这个对象会⾃动管理元素的渲染
*
*/
var Canvas=function(){
this.interval=null;
this.sprites=[]
}
/**
*
*/
Canvas.prototype={
/**
* 开始动画
*/
begin:function(){
this.interval=setInterval((function(param){
return function(){der();}
})(this),20);
},
/
**
*渲染
*/
render:function(){
//    M.trace(this.sprites.length)
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]
}
}
}
}
var ctx=$("canvas").getContext('2d');
var can=new Canvas();
<=ctx;
can.begin();
var m=M.Math;
/**
setInterval(function(){
for(var i in can.sprites){
if(typeof(can.sprites[i])=="function") continue;
can.sprites[i].move()
}
},20)
var circle=new Circle(ctx,100,100,100,{
strokeStyle:RandomColor(),
lineWidth:Math.random()*5
})
can.addSprite(1, circle)
var circle2=new Circle(ctx,100,100,50,{
strokeStyle:RandomColor(),
lineWidth:Math.random()*5
})
circle.appendChild(circle2)
var circle3=new Circle(ctx,50,60,20,{
strokeStyle:RandomColor(),
lineWidth:Math.random()*5
})
circle2.appendChild(circle3)
*/
var count=0
var img=new Image()
img.src="lecode/files/0fixed.gif"    load=function(){
setInterval(function(){
can.clear()
var circle=new Circle(ctx,0,0,m.random(30),{
strokeStyle:RandomColor(),
lineWidth:Math.random()*5
})
circle.speed={x:m.randomD(4),y:m.randomD(4)}            can.addSprite(count++, circle)
var rect=new Square(ctx,0,0,m.random(40),{
fillStyle:RandomColor(),
lineWidth:Math.random()*5
})
rect.speed={x:m.randomD(4),y:m.randomD(4)}
can.addSprite(count++, rect)
var img1=new Img(ctx,img,0,0,24,24,{
fillStyle:RandomColor(),
lineWidth:Math.random()*5
})
img1.speed={x:m.randomD(4),y:m.randomD(4)}            can.addSprite(count++, img1)
},400)
setInterval(function(){
for(var i in can.sprites){
if(typeof(can.sprites[i])=="function") continue;                can.sprites[i].move()
}
},20)
(document, "mousemove", function(e){
var e=e||window.event;
var pos=MousePos(e);
})
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。