【飘逸的线条~

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback);

}

);

});

function init(elemid) {

let canvas = document.getElementById(elemid),

c = canvas.getContext(“2d”),

w = (canvas.width = window.innerWidth),

h = (canvas.height = window.innerHeight);

c.fillStyle = “rgba(30,30,30,1)”;

c.fillRect(0, 0, w, h);

return {c:c,canvas:canvas};

}

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】

style.css

body,

html {

margin: 0px;

padding: 0px;

position: fixed;

background: rgb(30, 30, 30);

cursor: none;

}

script.js

window.onload = function () {

//functions definition

//class definition

class segm {

constructor(x, y, l) {

this.b = Math.random()*1.9+0.1;

this.x0 = x;

this.y0 = y;

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

this.x1 = this.x0 + l * Math.cos(this.a);

this.y1 = this.y0 + l * Math.sin(this.a);

this.l = l;

}

update(x, y) {

this.x0 = x;

this.y0 = y;

this.a = Math.atan2(this.y1 - this.y0, this.x1 - this.x0);

this.x1 = this.x0 + this.l * Math.cos(this.a);

this.y1 = this.y0 + this.l * Math.sin(this.a);

}

}

class rope {

constructor(tx, ty, l, b, slq) {

this.res = l / slq;

this.l = l;

this.segm = [];

this.segm.push(new segm(tx, ty, this.l / this.res));

for (let i = 1; i < this.res; i++) {

this.segm.push(

new segm(this.segm[i - 1].x1, this.segm[i - 1].y1, this.l / this.res)

);

}

this.b = b;

}

update(t) {

this.segm[0].update(t.x, t.y);

for (let i = 1; i < this.res; i++) {

this.segm[i].update(this.segm[i - 1].x1, this.segm[i - 1].y1);

}

}

show(t) {

if(t == “l”){

c.beginPath();

for (let i = 0; i < this.segm.length; i++) {

c.lineTo(this.segm[i].x0, this.segm[i].y0);

}

c.lineTo(

this.segm[this.segm.length - 1].x1,

this.segm[this.segm.length - 1].y1

);

c.strokeStyle = “white”;

c.lineWidth = this.b;

c.stroke();

c.beginPath();

c.arc(this.segm[0].x0, this.segm[0].y0, 1, 0, 2 * Math.PI);

c.fillStyle = “white”;

c.fill();

c.beginPath();

c.arc(

this.segm[this.segm.length - 1].x1,

this.segm[this.segm.length - 1].y1,

2,

0,

2 * Math.PI

);

c.fillStyle = “white”;

c.fill();

}else{

for (let i = 0; i < this.segm.length; i++) {

c.beginPath();

c.arc(this.segm[i].x0, this.segm[i].y0, this.segm[i].b, 0, 2*Math.PI);

c.fillStyle = “white”;

c.fill();

}

c.beginPath();

c.arc(

this.segm[this.segm.length - 1].x1,

this.segm[this.segm.length - 1].y1,

2, 0, 2*Math.PI

);

c.fillStyle = “white”;

c.fill();

}

}

}

//setting up canvas

let c = init(“canvas”).c,

canvas = init(“canvas”).canvas,

w = (canvas.width = window.innerWidth),

h = (canvas.height = window.innerHeight),

ropes = [];

//variables definition

let nameOfVariable = “value”,

mouse = {},

last_mouse = {},

rl = 50,

randl = [],

target = { x: w/2, y: h/2 },

last_target = {},

t = 0,

q = 10,

da = [],

type = “l”;

for (let i = 0; i < 100; i++) {

ropes.push(

new rope(

w / 2,

h / 2,

(Math.random() * 1 + 0.5) * 500,

Math.random() * 0.4 + 0.1,

Math.random()*15+5

)

);

randl.push(Math.random() * 2 - 1);

da.push(0);

}

//place for objects in animation

function draw() {