html文件<html>
<head>
<script type="text/javascript" src="../point/point.js"></script>
<style type="text/css">
.canvas{
background:#000;
}
</style>
</head>
<body >
<canvas class="canvas"></canvas>
<script>window.οnlοad=function(){
var width = window.innerWidth,
height =window.innerHeight;
S.init();
}</script>
</body>
</html>js文件
var S = {
init:function(){
Drawing.init();
var d = new Dot(window.innerWidth / 2,window.innerHeight / 2);
d._draw();
var d1 = new Dot(window.innerWidth / 2 +200,window.innerHeight / 2+200);
d1._draw();
Drawing.loop(function (){
d.move(d1);d1._draw();
});
}
};
Point = function(args){
this.x = args.x;
this.y = args.y;
this.z = args.z;
};
Dot = function(x,y){
this.p = new Point({
x:x,
y:y,
z:15
});
};
Dot.prototype = {
_draw: function(){
Drawing.drawCircle(this.p);
},
move: function(d){
dx = this.p.x - d.p.x;
dy = this.p.y - d.p.y;
dl = Math.sqrt(dx * dx + dy * dy);
e = 0.25;
this.p.x -= ((dx / dl) * e * dl);
this.p.y -= ((dy / dl) * e * dl);
this._draw(this);
}
}
Drawing = (function(){
var canvas,context,renderFn,
requestFrame = window.requestAnimateFrame ||
window.webkitRequestAnimateFrame ||
window.mozRequestAnimateFrame ||
window.oRequestAnimateFrame ||
window.msRequestAnimateFrame ||
function(callback){
window.setTimeout(callback,1000 / 60);
};
return {
init:function(){
canvas = document.querySelector('.canvas');
context = canvas.getContext('2d');
this.adjustCanvas();
},
adjustCanvas:function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
},
drawCircle: function(p){
context.fillStyle="#0000ff";
context.beginPath();
context.arc(p.x,p.y,p.z,0,2 * Math.PI,true);
context.closePath();
context.fill();
},
loop: function(fn){
renderFn = !renderFn?fn:renderFn;
this.clearFrame();
renderFn();
requestFrame.call(window, this.loop.bind(this));
},
clearFrame: function(){
context.clearRect(0,0,canvas.width,canvas.height);
}
}
}());
4001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
