首页 > 软件开发 > HTML >

HTML5圆点连线背景动画特效

来源：互联网 2023-03-16 19:10:34 294

HTML5圆点连线背景动画特效

工具/原料

adobe dreamweaver

方法/步骤

1

新建html文档。

HTML5圆点连线背景动画特效

2

书写hmtl代码。

canvas id="c">/canvas>

HTML5圆点连线背景动画特效

3

书写css代码。

style>

* {

padding:0;

margin:0;

}

canvas {

display:block;

}

/style>

HTML5圆点连线背景动画特效

4

书写并添加js代码。

script>

;(function() {

'use strict';

var c = document.getElementById('c');

var ctx = c.getContext('2d');

var w = c.width = window.innerWidth;

var h = c.height = window.innerHeight;

var cx = w / 2;

var cy = h / 2;

var P = function(x, y) {

this.x = x;

this.y = y;

this.vx = 0;

this.vy = 0;

this.r = 1 Math.random() * 10;

this.sa = Math.random() * Math.PI * 2;

this.ea = Math.random() * Math.PI * 2;

this.rt = Math.random() * Math.PI * 2;

this.vrt = 0;

this.h = 0;

};

P.prototype = {

constructor: P,

update: function() {

this.vx = Math.random() * 0.1 - 0.05;

this.vy = Math.random() * 0.1 - 0.05;

this.vrt = Math.random() * 0.02 - 0.01;

this.x = this.vx;

this.y = this.vy;

this.rt = this.vrt;

var dx = cx - this.x;

var dy = cy - this.y;

var d = Math.sqrt(dx * dx dy * dy);

this.h = dx / d * 360;

if (this.x 0) {

this.x = 0;

this.vx *= -1;

}

if (this.x > w) {

this.x = w;

this.vx *= -1;

}

if (this.y 0) {

this.y = 0;

this.vy *= -1;

}

if (this.y > h) {

this.y = h;

this.vy *= -1;

}

},

render: function(ctx) {

ctx.save();

ctx.strokeStyle = 'black';

ctx.fillStyle = 'hsla(' this.h ', 100%, 50%, 0.5)';

ctx.translate(this.x, this.y);

ctx.rotate(this.rt);

ctx.beginPath();

ctx.arc(0, 0, this.r, this.sa, this.ea);

ctx.fill();

ctx.stroke();

ctx.restore();

}

};

var ps = [];

var p;

var ctr = 200;

for (var i = 0; i ctr; i ) {

p = new P(Math.random() * w, Math.random() * h);

ps.push(p);

}

requestAnimationFrame(function loop() {

requestAnimationFrame(loop);

ctx.clearRect(0, 0, w, h);

for (var i = 0; i ctr; i ) {

p = ps[i];

p.update();

p.render(ctx);

}

for (var i = 0; i ctr; i ) {

var p1 = ps[i];

for (var j = i 1; j ctr; j ) {

var p2 = ps[j];

var dx = p1.x - p2.x;

var dy = p1.y - p2.y;

var d = Math.sqrt(dx * dx dy * dy);

if (d 50) {

ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';

ctx.beginPath();

ctx.moveTo(p1.x, p1.y);

ctx.lineTo(p2.x, p2.y);

ctx.stroke();

}

}

}

});

})();

/script>

HTML5圆点连线背景动画特效

4本页面未经授权抓取自百度经验

5

代码整体结构。

HTML5圆点连线背景动画特效

6

查看效果。

HTML5圆点连线背景动画特效

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML

上一篇：html5 svg开关按钮切换动画特效下一篇：html中如何适用CSS设置盒子模型的padding

办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码