网站动态背景线条跟随鼠标移动，吸附鼠标效果
生活随笔
收集整理的這篇文章主要介紹了
网站动态背景线条跟随鼠标移动，吸附鼠标效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
網站動態背景線條跟隨鼠標移動，吸附鼠標效果
動態背景線條，鼠標移動可以吸附，可以添加配置，代碼如下： <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>粒子線條canvas效果</title><style>#J_dotLine {display: block;margin: 0 auto;}</style> </head><body><canvas id="J_dotLine"></canvas><script>; (function (window) {function Dotline(option) {this.opt = this.extend({dom: 'J_dotLine',//畫布idcw: 1000,//畫布寬ch: 500,//畫布高ds: 100,//點的個數r: 0.5,//圓點半徑cl: '#000',//顏色dis: 100//觸發連線的距離}, option);this.c = document.getElementById(this.opt.dom);//canvas元素idthis.ctx = this.c.getContext('2d');this.c.width = this.opt.cw;//canvas寬this.c.height = this.opt.ch;//canvas高this.dotSum = this.opt.ds;//點的數量this.radius = this.opt.r;//圓點的半徑this.disMax = this.opt.dis * this.opt.dis;//點與點觸發連線的間距this.color = this.color2rgb(this.opt.cl);//設置粒子線顏色this.dots = [];//requestAnimationFrame控制canvas動畫var RAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60);};var _self = this;//增加鼠標效果var mousedot = { x: null, y: null, label: 'mouse' };this.c.onmousemove = function (e) {var e = e || window.event;mousedot.x = e.clientX - _self.c.offsetLeft;mousedot.y = e.clientY - _self.c.offsetTop;};this.c.onmouseout = function (e) {mousedot.x = null;mousedot.y = null;}//控制動畫this.animate = function () {_self.ctx.clearRect(0, 0, _self.c.width, _self.c.height);_self.drawLine([mousedot].concat(_self.dots));RAF(_self.animate);};}//合并配置項，es6直接使用obj.assign();Dotline.prototype.extend = function (o, e) {for (var key in e) {if (e[key]) {o[key] = e[key]}}return o;};Dotline.prototype.color2rgb = function (colorStr) {var red = null,green = null,blue = null;var cstr = colorStr.toLowerCase();//變小寫var cReg = /^#[0-9a-fA-F]{3,6}$/;//確定是16進制顏色碼if (cstr && cReg.test(cstr)) {if (cstr.length == 4) {var cstrnew = '#';for (var i = 1; i < 4; i++) {cstrnew += cstr.slice(i, i + 1).concat(cstr.slice(i, i + 1));}cstr = cstrnew;}red = parseInt('0x' + cstr.slice(1, 3));green = parseInt('0x' + cstr.slice(3, 5));blue = parseInt('0x' + cstr.slice(5, 7));}return red + ',' + green + ',' + blue;}//畫點Dotline.prototype.addDots = function () {var dot;for (var i = 0; i < this.dotSum; i++) {//參數dot = {x: Math.floor(Math.random() * this.c.width) - this.radius,y: Math.floor(Math.random() * this.c.height) - this.radius,ax: (Math.random() * 2 - 1) / 1.5,ay: (Math.random() * 2 - 1) / 1.5}this.dots.push(dot);}};//點運動Dotline.prototype.move = function (dot) {dot.x += dot.ax;dot.y += dot.ay;//點碰到邊緣返回dot.ax *= (dot.x > (this.c.width - this.radius) || dot.x < this.radius) ? -1 : 1;dot.ay *= (dot.y > (this.c.height - this.radius) || dot.y < this.radius) ? -1 : 1;//繪制點this.ctx.beginPath();this.ctx.arc(dot.x, dot.y, this.radius, 0, Math.PI * 2, true);this.ctx.stroke();};//點之間畫線Dotline.prototype.drawLine = function (dots) {var nowDot;var _that = this;//自己的思路：遍歷兩次所有的點，比較點之間的距離，函數的觸發放在animate里this.dots.forEach(function (dot) {_that.move(dot);for (var j = 0; j < dots.length; j++) {nowDot = dots[j];if (nowDot === dot || nowDot.x === null || nowDot.y === null) continue;//continue跳出當前循環開始新的循環var dx = dot.x - nowDot.x,//別的點坐標減當前點坐標dy = dot.y - nowDot.y;var dc = dx * dx + dy * dy;if (Math.sqrt(dc) > Math.sqrt(_that.disMax)) continue;// 如果是鼠標，則讓粒子向鼠標的位置移動if (nowDot.label && Math.sqrt(dc) > Math.sqrt(_that.disMax) / 2) {dot.x -= dx * 0.02;dot.y -= dy * 0.02;}var ratio;ratio = (_that.disMax - dc) / _that.disMax;_that.ctx.beginPath();_that.ctx.lineWidth = ratio / 2;_that.ctx.strokeStyle = 'rgba(' + _that.color + ',' + parseFloat(ratio + 0.2).toFixed(1) + ')';_that.ctx.moveTo(dot.x, dot.y);_that.ctx.lineTo(nowDot.x, nowDot.y);_that.ctx.stroke();//不描邊看不出效果//dots.splice(dots.indexOf(dot), 1);}});};//開始動畫Dotline.prototype.start = function () {var _that = this;this.addDots();setTimeout(function () {_that.animate();}, 100);}window.Dotline = Dotline;}(window));//調用window.onload = function () {var dotline = new Dotline({dom: 'J_dotLine',//畫布idcw: 1000,//畫布寬ch: 500,//畫布高ds: 100,//點的個數r: 0.5,//圓點半徑cl: '#fff',//粒子線顏色dis: 100//觸發連線的距離}).start();}</script> </body></html>
vue，react寫法，類分裝：
創建一個dotline.js
調用方法：
html：
js:
import Dotline from "./dotline.js";const option = {dom: 'J_dotLine',//畫布idcw: 1000,//畫布寬ch: 500,//畫布高ds: 250,//點的個數r: 3,//圓點半徑cl: '#061eb3',//粒子線顏色dis: 120//觸發連線的距離} const dotline = new Dotline(option).start();總結
以上是生活随笔為你收集整理的网站动态背景线条跟随鼠标移动，吸附鼠标效果的全部內容，希望文章能夠幫你解決所遇到的問題。
