线条变换美丽的效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> window.requestAnimFrame = (function() { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || 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}; } </script> <style> body, html { margin: 0px; padding: 0px; position: fixed; background: rgb(30,30,30); </style> </head> <body translate="no"> <canvas id="canvas"></canvas> <script> window.onload = function () { let c = init("canvas").c, canvas = init("canvas").canvas, w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight, mouse = { x: w / 2, y: h / 2 }, last_mouse = {}; let n = 2000, herd = []; class point { constructor() { this.targetIndex = [Math.floor(Math.random() * n)]; this.f = 10; this.ang = Math.random() * 2 * Math.PI; this.x = w / 2; //Math.random()*w; this.y = h / 2; //Math.random()*h; this.ax = this.f * Math.cos(this.ang); this.ay = this.f * Math.sin(this.ang); this.vx = this.ax; this.vy = this.ay; this.x += this.vx; this.y += this.vy; this.nd = Math.random() * 50 + 0.1; } follow(arr) { this.t = { x: 0, y: 0, sumx: 0, sumy: 0 }; this.count = 0; for (let i = 0; i < this.targetIndex.length; i++) { this.t.sumx += arr[this.targetIndex[i]].x; this.t.sumy += arr[this.targetIndex[i]].y; t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0