var mycanvas = document.getElementById("mycanvas");
var ctx = mycanvas.getContext("2d");
/*ctx.beginPath();
ctx.fillStyle = "RGB(255,0,0)";
ctx.arc(100,100,10,0,2*Math.PI,true);
ctx.fill();*/
//数字0-9
var nums = [];
var i = 0;
nums.push([{
x: 0,
y: 0
}, {
x: 0,
y: 1
}, {
x: 0,
y: 2
}, {
x: 0,
y: 3
}, {
x: 0,
y: 4
}, {
x: 0,
y: 5
}, {
x: 0,
y: 6
}, {
x: 1,
y: 0
}, {
x: 1,
y: 6
}, {
x: 2,
y: 0
}, {
x: 2,
y: 6
}, {
x: 3,
y: 0
}, {
x: 3,
y: 1
}, {
x: 3,
y: 2
}, {
x: 3,
y: 3
}, {
x: 3,
y: 4
}, {
x: 3,
y: 5
}, {
x: 3,
y: 6
}]);
nums.push([{
x: 3,
y: 0
}, {
x: 3,
y: 1
}, {
x: 3,
y: 2
}, {
x: 3,
y: 3
}, {
x: 3,
y: 4
}, {
x: 3,
y: 5
}, {
x: 3,
y: 6
}]);
nums.push([{
x: 0,
y: 0
}, {
x: 1,
y: 0
}, {
x: 2,
y: 0
}, {
x: 3,
y: 0
}, {
x: 3,
y: 1
}, {
x: 3,
y: 2
}, {
x: 3,
y: 3
}, {
x: 2,
y: 3
}, {
x: 1,
y: 3
}, {
x: 0,
y: 3
}, {
x: 0,
y: 4
}, {
x: 0,
y: 5
}, {
x: 0,
y: 6
}, {
x: 1,
y: 6
}, {
x: 2,
y: 6
}, {
x: 3,
y: 6
}]);
nums.push([{
x: 0,
y: 0
}, {
x: 1,
y: 0
}, {
x: 2,
y: 0
}, {
x: 3,
y: 0
}, {
x: 3,
y: 1
}, {
x: 3,
y: 2
}, {
x: 3,
y: 3
}, {
x: 2,
y: 3
}, {
x: 1,
y: 3
}, {
x: 0,
y: 3
}, {
x: 1,
y: 6
}, {
x: 2,
y: 6
}, {
x: 3,
y: 4
}, {
x: 3,
y: 5
}, {
x: 0,
y: 6
}, {
x: 3,
y: 6
}]);
nums.push([{
x: 0,
y: 0
}, {
x: 0,
y: 1
}, {
x: 0,
y: 2
}, {
x: 3,
y: 0
}, {
x: 3,
y: 1
}, {
x: 3,
y: 2
}, {
x: 3,
y: 3
}, {
x: 2,
y: 3
}, {
x: 1,
y: 3
}, {
x: 0,
y: 3
}, {
x: 3,
y: 4
}, {
x: 3,
y: 5
}, {
x: 3,
y: 6
}]);
nums.push([{
x: 0,
y: 0
}, {
x: 0,
y: 1
}, {
x: 0,
y: 2
}, {
x: 1,
y: 0
}, {
x: 2,
y: 0
}, {
x: 3,
y: 0
}, {
x: 3,
y: 3
}, {
x: 2,
y: 3
}, {
x: 1,
y: 3
}, {
x: 0,
y: 3
}, {
x: 0,
y: 6
}, {
x: 1,
y: 6
}, {
x: 2,
y: 6
}, {
x: 3,
y: 4
}, {
x: 3,
y: 5
}, {
x: 3,
y: 6
}]);
nums.push([{
x: 0,
y: 0
}, {
x: 0,
y: 1
}, {
x: 0,
y: 2
}, {
x: 1,
y: 0
}, {
x: 2,
y: 0
}, {
x: 3,
y: 0
}, {
x: 3,
y: 3
}, {
x: 2,
y: 3
}, {
x: 1,
y: 3
}, {
x: 0,
y: 3
}, {
x: 0,
y: 4
}, {
x: 0,
y: 5
}, {
x: 0,
y: 6
}, {
x: 1,
y: 6
}, {
x: 2,
y: 6
}, {
x: 3,
y: 4
}, {
x: 3,
y: 5
}, {
x: 3,
y: 6
}]);
nums.push([{
x: 0,
y: 0
}, {
x: 1,
y: 0
}, {
x: 2,
y: 0
}, {
x: 3,
y: 0
}, {
x: 3,
y: 1
}, {
x: 3,
y: 2
}, {
x: 3,
y: 3
}, {
x: 3,
y: 4
}, {
x: 3,
y: 5
}, {
x: 3,
y: 6
}]);
nums.push([{
x: 0,
y: 0
}, {
x: 0,
y: 1
}, {
x: 0,
y: 2
}, {
x: 1,
y: 0
}, {
x: 2,
y: 0
}, {
x: 3,
y: 0
}, {
x: 3,
y: 1
}, {
x: 3,
y: 2
}, {
x: 3,
y: 3
}, {
x: 2,
y: 3
}, {
x: 1,
y: 3
}, {
x: 0,
y: 3
}, {
x: 0,
y: 4
}, {
x: 0,
y: 5
}, {
x: 0,
y: 6
}, {
x: 1,
y: 6
}, {
x: 2,
y: 6
}, {
x: 3,
y: 4
}, {
x: 3,
y: 5
}, {
x: 3,
y: 6
}]);
nums.push([{
x: 0,
y: 0
}, {
x: 0,
y: 1
}, {
x: 0,
y: 2
}, {
x: 1,
y: 0
}, {
x: 2,
y: 0
}, {
x: 3,
y: 0
}, {
x: 3,
y: 1
}, {
x: 3,
y: 2
}, {
x: 3,
y: 3
}, {
x: 2,
y: 3
}, {
x: 1,
y: 3
}, {
x: 0,
y: 3
}, {
x: 0,
y: 6
}, {
x: 1,
y: 6
}, {
x: 2,
y: 6
}, {
x: 3,
y: 4
}, {
x: 3,
y: 5
}, {
x: 3,
y: 6
}]);
// handle multiple browsers for requestAnimationFrame()
window.requestAFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
// if all else fails, use setTimeout
function (callback) {
return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
};
})();
// handle multiple browsers for cancelAnimationFrame()
window.cancelAFrame = (function () {
return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || function (id) {
window.clearTimeout(id);
};
})();
var Ball = function (feature) {
feature.x = feature.x || 100;
feature.y = feature.y || 100;
feature.r = feature.r || 10;
feature.color = feature.color || "RGB(255,0,0)";
this.x = feature.x;
this.y = feature.y;
this.r = feature.r;
this.color = feature.color;
//速度和加速度
this.vx = Math.random() * 8 - 4;;
this.vy = 0;
this.ax = 0;
this.ay = 0.5;
this.init();
};
Ball.prototype.init = function () {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
ctx.fill();
};
//var ball = new Ball({});
var Num = function (feature) {
feature.coords = feature.coords || []; //坐标值
feature.space = feature.space || 25; //小球之间的间距
feature.init = feature.init || {
x: 200,
y: 50
}; //第一球的坐标
this.coords = feature.coords;
this.space = feature.space;
this.init = feature.init;
//保存所有小球
this.balls = [];
this.draw();
};
Num.prototype.draw = function () {
var that = this;
this.coords.forEach(function (coord) {
var ball = new Ball({
x: coord.x * that.space + that.init.x,
y: coord.y * that.space + that.init.y
});
that.balls.push(ball);
});
};
Num.prototype.run = function () {
var that = this;
//this.coords.forEach(function(coord){
//var ball = new Ball({x:coord.x*that.space+that.init.x,
// y:coord.y*that.space+that.init.y});
// that.balls
//});
this.balls.forEach(function (ball) {
ball.vy += ball.ay;
ball.x += ball.vx;
ball.y += ball.vy;
ball.init();
});
};
var AllBalls = function () {
//this.nums = [];
this.balls = [];
//this.init();
};
AllBalls.prototype.init = function () {
//for(var i=0;i<nums.length;i++){
// this.nums.push(new Num({coords:nums[i]}));
//}
};
AllBalls.prototype.run = function () {
var that = this;
ctx.clearRect(0, 0, 500, 400);
this.balls.forEach(function (ball) {
ball.vy += ball.ay;
ball.x += ball.vx;
ball.y += ball.vy;
ball.init();
});
};
var allBalls = new AllBalls();
//allBalls.balls = allBalls.balls.concat(num.balls);
//http://technet.microsoft.com/zh-cn/library/hh920765.aspx
timer(Date.now);
function timer(time) {
ctx.clearRect(0, 0, 500, 400);
var num = new Num({
coords: nums[i]
});
//allBalls.balls = allBalls.balls.concat(num.balls);
//allBalls.run();
i++;
if (i > 9) {
i = 0;
}
//num.run();
//requestAFrame(function(){
//allBalls.run();
//setTimeout(timer,500);
//});
setTimeout(timer, 500);
};
<body>
<canvas id="mycanvas" width=500 height=400></canvas>
<script src="led.js" type="text/javascript"></script>
</body>
canvas {
border: 1px solid #4c4c4c;
border-radius: 10px;
background: #0A0A0A;
box-shadow: 5px 5px rgba(0, 100, 100, .6);
}