particle-field
canvas实现粒子场的动画效果
实现效果：粒子会动并且在一定范围内粒子之间出现连线。
效果图
以下是实现过程
一、获取canvas对象和画笔
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
// 保存canvas的宽、高
var w = canvas.offsetWidth
var h = canvas.offsetHeight
// 注意：canvas实际有2套尺寸，一个是本身大小，另一个是绘图表面的大小，这里处理使它们大小一致，不然会出现拉伸情况
canvas.width = w
canvas.height = h
二、创建点的类
从效果上看有很多个点，每个点都有它们有相同的属性比如坐标、半径、速度等
function Point(x, y) {
this.x = x
this.y = y
this.r = 1 + Math.random() * 2
this.sx = Math.random() * 2 - 1
this.sy = Math.random() * 2 - 1
}
三、给Point添加画点的方法
首先画布是没有东西的，所以先有了点才可以继续下去动作
Point.prototype.draw = function(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = '#aaa'
ctx.fill()
}
四、给Point添加点的动作
Point.prototype.move = function() {
this.x += this.sx
this.y += this.sy
if(this.x > w || this.x < 0) this.sx = -this.sx
if(this.y > h || this.y < 0) this.sy = -this.sy
}
五、点与点之间的连接 —— 画线
Point.prototype.drawLine = function(ctx, p) {
var dx = this.x - p.x
var dy = this.y - p.y
var d = Math.sqrt(dx * dx + dy * dy)
if(d < 100) {
var alpha = (100 - d) / 100 * 1
ctx.beginPath()
ctx.moveTo(this.x, this.y)
ctx.lineTo(p.x, p.y)
ctx.closePath()
ctx.strokeStyle = 'rgba(170, 170, 170, ' + alpha + ')'
ctx.strokeWidth = 1
ctx.stroke()
}
}
六、实例化点
现在才开始拿到那些点，并把每个点放在一个数组里面保存。
var points = []
for(var i = 0; i < 40; i++) {
points.push(new Point(Math.random() * w, Math.random() * h))
}
七、画点
把放在points数组里面的点一个个拿出来，调用上面写好点的方法：画点（draw）、点会动（move）、点连线，最后调用 paint() 方法执行。
function paint() {
ctx.clearRect(0, 0, w, h) //清空画布
for(var i = 0; i < points.length; i++) {
points[i].move()
points[i].draw(ctx)
for(var j = i + 1; j < points.length; j++) {
points[i].drawLine(ctx, points[j])
}
}
}
// 这里使用requestAnimationFrame更新画面
function loop() {
requestAnimationFrame(loop)
paint()
}
loop()
