核心提示：demo1 demo2 每次重新打开页面速度都会有差别!DOCTYPE htmlhtml lang=enheadmeta charset=utf-8style *{margin:0;padding:0...
demo1 demo2 每次重新打开页面速度都会有差别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<canvas id="Mycanvas"></canvas>
</body>
<script>
!(function(doc){
/**执行**/
function runMove(elm){
var cvs=doc.getElementById(elm),
cont=cvs.getContext("2d"),
w=window.innerWidth,
h=window.innerHeight;
cvs.width=w;
cvs.height=h;
/**
* 对象赋予变量
* @type {[type]}
*/
var rectObj=initRect();
var render=function(){
cont.clearRect(0, 0, w, h);
rectObj.render(cont);
}
/**
* X坐标先清除画布再更新
* @return {[type]} [description]
*/
var update=function(){
rectObj.update();
}
var renderAndUpdate=function(){
render();
update();
requestAnimationFrame(renderAndUpdate);
}
renderAndUpdate();
}
/**获取画布里面的对象**/
function initRect(){
var options={
width:200,
height:100,
x:0,
y:0,
bgColor:"#ff00ff",
bw:10,
boClolor:"black",
startme:+new Date()
}
var draw=new drawRect(options);
return draw;
}
/**
* init 初始化坐标和画布数值
* @param {[type]} rectOption [description]
* @return {[type]} [description]
*/
function drawRect(rectOption){
this.rectOption=rectOption;
this.x=rectOption.x;
this.y=rectOption.y;
this.w=rectOption.width;
this.h=rectOption.height;
this.bw=rectOption.bw;
this.angle=Math.random()*(Math.PI*2);
this.speedX=randomSpeed(0.05,2);
}
/**渲染
* [prototype description]
* @type {Object}
*/
drawRect.prototype={
render:function(context){
context.beginPath();
context.rect(this.x, this.y, this.w, this.h);
context.fillStyle=this.bgColor;
context.fill();
context.lineWidth=this.bw;
context.strokeStyle=this.boClolor;
context.stroke();
},
update:function(){
this.angle+=this.speedX;
if(this.angle>2*Math.PI){
this.angle-=2*Math.PI
}
console.log(this.x*Math.sin(this.angle));
this.x+=10*Math.sin(this.angle);
}
}
/**
* *获取随机速度值
* @param {[type]} min [description]
* @param {[type]} max [description]
* @return {[type]} [description]
*/
function randomSpeed(min,max){
var random=Math.random()*(max-min)+min;
return random;
}
runMove("Mycanvas");
})(document)
</script>
</html>
Canvas运动的理解就是利用定时器requestAnimationFrame方法1秒60帧左右不停的擦除，重绘，在我们的肉眼里面是看不到它的过程的 1秒连起来 就成了动画，应该说我们再电视上面看到的老期动画片都是这样实现的吧。 
