标签：改变 效果 restore save 运动 表示 set 半径 计时器
最近看到位博主的博客背景图很是炫酷，查找下资料了解是canvas实现效果，今天就来看看详细解剖下吧。
首先了解下canvas中的动画原理？canvas中的动画其实是通过不断的重绘来实现动起来的效果的。通过设计小球的位置变化，达到小球不断运动的效果。同时也可以设计小球衍射，大小的变化实现其他效果。这里就只涉及小球位置，颜色的变化吧。
1，定义小球对象。
var ball = {
xPointer: 100, //小球初始x坐标
yPointer: 100, //小球初始y坐标
speedx: 1, //x方向的速度
speedy: 0.1, //y方向的速度
x: 1, //x轴运动方向（1表示正方向，-1表示反方向）
y: -1, //y轴运动方向
color: "blue", //小球颜色
radius: 10, //小球半径
};
2，生成小球。定义一个数组来装这些小球，小球的起始坐标、颜色、运动方向都不同所以这些值需要随机获取。
var count = 800;
var balls = []; //小球数组
function initBall() {
canvas=document.getElementById("canvas");
ctx=canvas.getContext("2d");
//循环生成60个小球
for (var i = 0; i < 60; i++) {
// console.log(getIndex() + " " + getIndex())
var ball = {};
ball.xPointer = getRandom(20, 980);//随机小球的X坐标
ball.yPointer = getRandom(20, 340);//随机小球的y坐标
ball.x = getIndex();//随机小球x轴运动方向
ball.y = getIndex();//随机小球的y轴运动方向
ball.speedx = Math.random();//随机小球x轴方向速度
ball.speedy = Math.random();//随机小球y轴方向速度
ball.radius = 9;//小球半径
ball.color = "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);//随机小球颜色
balls.push(ball);
}
}
//随机一个1或者-1的方法
function getIndex() {
var arr = [0, 1];
var index = Math.floor((Math.random() * arr.length));
if (index == 0) {
index = -1;
}
return index;
}
//获取两数之间的一个随机数的方法
function getRandom(first, last) {
var choice = last - first + 1;
return Math.floor(Math.random() * choice + first);
}
3，绘制小球。
<canvas id="canvas" width="1500" height="1200" style=‘background-color: #EEEEEE;‘></canvas>
function draw(ctx) {
ctx.clearRect(0, 0, 1000, 360);//绘制前先清除画布
for (var i = 0; i < balls.length; i++) {
ctx.save();
ctx.beginPath();
ctx.fillStyle = balls[i].color;
ctx.arc(balls[i].xPointer, balls[i].yPointer, balls[i].radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
ctx.restore();
}
}
4，运动起来 小球运动的过程中使用了简单的碰撞检测，每次到达画布的边缘就改变小球的运动方向。
//修改小球的状态，使小球动起来的方法
function update(balls, ctx) {
for (var i = 0; i < balls.length; i++) {
balls[i].xPointer += balls[i].vx * balls[i].x;
balls[i].yPointer += balls[i].vy * balls[i].y;
//碰撞检测 X轴方向
if (balls[i].xPointer + balls[i].radius >= canvas.width || balls[i].xPointer - balls[i].radius <= 0) {
balls[i].x = balls[i].x * -1;
}
//碰撞检测 Y轴方向
if (balls[i].yPointer + balls[i].radius >= canvas.height || balls[i].yPointer - balls[i].radius <= 0) {
balls[i].y = balls[i].y * -1;
}
}
}
5，绘制小球和小球之间的连线
//小球之间连线
function drawLine(balls, ctx) {
for (var i = 0; i < balls.length; i++) {
for (var j = 0; j < balls.length; j++) {
var xx = Math.pow((balls[i].xPointer - balls[j].xPointer), 2);
var yy = Math.pow((balls[i].yPointer - balls[j].yPointer), 2);
var zz = Math.sqrt(xx + yy);
//判断两个小球如果之间距离在20到100之间，就绘制一条直线
if (zz <= 100&&zz>=20) {
console.log(zz)
ctx.save();
ctx.beginPath();
ctx.strokeStyle="#999999";
ctx.lineWidth=0.1;
// ctx.strokeStyle= "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
ctx.moveTo(ballList[i].xPointer, balls[i].yPointer);
ctx.lineTo(ballList[j].xPointer,balls[j].yPointer);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
}
}
}
6，运行。
(function(){
initBall();//生成小球
//计时器
setInterval(function() {
draw(ctx);//绘制
update(balls, ctx);//修改小球状态
drawLine(balls, ctx);//画线
}, 24)
})();
其它
标签：改变 效果 restore save 运动 表示 set 半径 计时器
原文地址：http://www.cnblogs.com/swan1014/p/7536950.html
