您的位置：首页 > 其它

小球在屏幕上随机移动

2014-10-12 21:48 239 查看

<html>
<head>
<style type="text/css">
.canvas{
background:#000;
}
</style>

</head>
<body>
<canvas class="canvas" ></canvas>
<script type="text/javascript">
var S = {
start: function(){
Drawing.init();
var d = new Dot(5,20);
Drawing.loop(function (){
d.move();
});
}
};
Dot = function(x,y){
this.x = x;
this.y = y;
this.z = 25;
this.h =1;
};
Dot.prototype = {
move: function(){
this.x = Math.random() * window.innerWidth ;
this.y = Math.random() * window.innerHeight ;
Drawing.drawDot(this);
}
};
Drawing = (function(){
var canvas,context,animatefn,
requestFrame = window.requestAnimateFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimateFrame ||
window.msRequestAnimateFrame ||
function(callback){
window.setTimeout(callback,1000/60);
};
return {
init: function(){
canvas = document.querySelector('.canvas');
context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
},
drawDot: function(dot){
context.fillStyle = '#fff';
context.beginPath();
context.arc(dot.x ,dot.y ,dot.z,0,2 * Math.PI,true);
context.closePath();
context.fill();
},
clearAnimate: function(){
context.clearRect(0,0,canvas.width,canvas.height);
},
loop: function(fn){
animatefn = !animatefn ? fn : animatefn;
this.clearAnimate();
animatefn();
requestFrame.call(window,this.loop.bind(this));
}
}
}());
S.start();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航