html代码
作为一家“创意+整合+营销”的成都网站建设机构，我们在业内良好的客户口碑。
成都创新互联提供从前期的网站品牌分析策划、网站设计、网站设计、
成都做网站、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。
您的浏览器不支持canvas
css代码
#canvas {
background-color: cadetblue;
display: block;
overflow: hidden;
}javascript代码
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//鼠标路径
var mouseX = canvas.width / 2;
var mouseY = canvas.height / 2;
//浏览器窗口改变
window.onresize = function(){
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
//生成随机数
function randomNum(x, y) {
return Math.floor(Math.random() * (y - x + 1) + x);
}
// 创建小球对象
function Ball() {}
Ball.prototype = {
// 初始化
init: function(){
this.r = randomNum(0.1, 3); // 小球半径
this.color = "#fff"; // 小球颜色
// 随机坐标轴
this.x = randomNum(this.r, canvas.width - this.r);
this.y = randomNum(this.r, canvas.height - this.r);
//随机速度
this.speedX = randomNum(1, 3) * (randomNum(0, 1) ? 1 : -1);
this.speedY = randomNum(1, 3) * (randomNum(0, 1) ? 1 : -1);
},
move: function(){ // 小球移动
this.x += this.speedX * 0.2; // x轴移动
this.y += this.speedY * 0.2; // y轴移动
// 左边界
if(this.x <= this.r) {
this.x = this.r;
// 反方向
this.speedX *= -1;
}
// 右边界
if(this.x >= canvas.width - this.r) {
this.x = canvas.width - this.r
this.speedX *= -1;
}
//上边界
if(this.y <= this.r) {
this.y = this.r;
this.speedY *= -1;
}
//下边界
if(this.y >= canvas.height - this.r) {
this.y = canvas.height - this.r;
this.speedY *= -1;
}
},
draw: function(){ // 绘制小球
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
}
}
var balls = []; // 小球盒子
for(var i = 0; i < 0.0002 * canvas.width * canvas.height; i++) {
ball = new Ball(); // 实例化对象
ball.init() // 初始化数据
balls.push(ball);
}
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
for(var i = 0; i < balls.length; i++) {
balls[i].move(); // 小球移动
balls[i].draw(); // 更新小球位置
if(ball_to_mouse(balls[i]) < 130) { // 球体与鼠标距离-->画线
ctx.lineWidth = (130 - ball_to_mouse(balls[i])) * 1.5 / 130;
ctx.beginPath();
ctx.moveTo(balls[i].x, balls[i].y);
ctx.lineTo(mouseX, mouseY);
ctx.strokeStyle = balls[i].color;
ctx.stroke();
}
}
for(var i = 0; i < balls.length; i++) {
for(var j = 0; j < balls.length; j++) {
if(ball_to_ball(balls[i], balls[j]) < 80) { // 球体之间距离-->画线
ctx.lineWidth = (80 - ball_to_ball(balls[i], balls[j])) * 0.6 / 80;
// 线体透明
ctx.globalAlpha = (130 - ball_to_ball(balls[i], balls[j])) * 1 / 80;
ctx.beginPath();
ctx.moveTo(balls[i].x, balls[i].y);
ctx.lineTo(balls[j].x, balls[j].y);
ctx.strokeStyle = balls[i].color;
ctx.stroke();
}
}
}
// 当前画布透明度
ctx.globalAlpha = 1.0;
}, 30);
//鼠标移动
canvas.|| window.event;
mouseX = e.offsetX;
mouseY = e.offsetY;
}
//鼠标跟每个点之间的距离
function ball_to_mouse(obj) {
var disX = Math.abs(mouseX - obj.x);
var disY = Math.abs(mouseY - obj.y);
return Math.sqrt(disX * disX + disY * disY);
}
//两点之间的距离
function ball_to_ball(obj1, obj2) {
var disX = Math.abs(obj1.x - obj2.x);
var disY = Math.abs(obj1.y - obj2.y);
return Math.sqrt(disX * disX + disY * disY);
}创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。
文章标题：canvas连线动画-创新互联
文章分享：
http://cdxtjz.cn/article/icoec.html
