最近有人问我博客的背景效果怎么实现的，其实就是一个canvas效果，今天抽空写篇博客简单分享下思路
Demo演示
主要分为两步
实现过程
1.第一步封装个函数mainBgFullScreen初始化canvas
使canvas根据窗口自适应
width = $(':root').width();
height = $(':root').height();
zoom = getZoom();
$canvas.attr('width', width);
$canvas.attr('height', height);
由于要做到自适应需要监听resize事件，在回调中执行mainBgFullScreen
绘制Canvas，固定套路
if ($canvas[0].getContext) {
var ctx = $canvas[0].getContext('2d');
ctx.fillStyle = '#ffffff';
ctx.strokeStyle = 'rgba(255,255,255,0)';
ctx.lineWidth = 1 * zoom;
drawCanvas(ctx);
}
2.第二步在drawCanvas函数中根据一定的逻辑画点画线
1.画点：
封装一个工厂生成不同大小，不同位置,运动速度不同的点，这些根据屏幕缩放比生成，保证各个屏幕大小下显示协调
function creatPoint() {
var xsKew = (Math.random() - 0.5) * zoom;//x方向速度
var ysKew = (Math.random() - 0.5) * zoom;//y方向速度
var r = ~~(Math.random() * 5 * zoom);
var x = ~~(Math.random() * (width - r)) + 2 * r;
var y = ~~(Math.random() * (height - r)) + 2 * r;
var point = {
x: x,
y: y,
xsKew: xsKew,
ysKew: ysKew,
r: r
}
return point;
}
在初始化Canvas时循环生成一些点，塞到数组中，画点时循环数组画点
//初始化先放200个点
for (var i = 0; i < ~~(200 * zoom); i++) {
pointArry.push(creatPoint());
}
//drawCanvas函数中
$.each(pointArry, function (index) {
//绘制点
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.fill();
})
由于监听resize事件所以每次初始化，先清空数组
1.画线
封装一个函数drawLine，参数是两点坐标以及ctx，根据勾股定理，大家应该都懂的，画两点之间的连线
//画线
function drawLine(ctx, p1x, p1y, p2x, p2y) {
var xDistance = Math.abs(p1x - p2x);//计算两点间的x距离
var yDistance = Math.abs(p1y - p2y);//计算两点间的y距离
var distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
if (distance 0 && mouseY > 0) {
drawLine(ctx, mouseX, mouseY, this.x, this.y);
}
至此大功告成
大家可以直接看效果
小伙伴们如果有更好的方案，请分享一下，互相学习
如需转载，请注明出处:粒子背景效果.html
相关文章
精彩导读
热门资讯
关注我们
