File size: 2,345 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
/* eslint-disable */
import { useEffect } from 'react'
const id = 'canvasRibbon'
const Ribbon = () => {
const destroyRibbon = ()=>{
const ribbon = document.getElementById(id)
if(ribbon && ribbon.parentNode){
ribbon.parentNode.removeChild(ribbon)
}
}
useEffect(() => {
createRibbon()
return () => destroyRibbon()
}, [])
return <></>
}
export default Ribbon
/**
* 创建连接点
* @param config
*/
function createRibbon() {
!(function () {
const t = document.getElementById('__next')
const e = {
z: n(t, 'zIndex', 0),
a: n(t, 'alpha', 0.6),
s: n(t, 'size', 90),
c: t.getAttribute('data-click')
}
function n(t, e, n) {
return Number(t.getAttribute(e)) || n
}
const i = document.createElement('canvas'),
o = i.getContext('2d'),
c = window.devicePixelRatio || 1,
a = window.innerWidth,
l = window.innerHeight,
d = e.s
i.id= id
let r, s
const u = Math
let h = 0
const g = 2 * u.PI,
f = u.cos,
m = u.random
function x() {
for (
o.clearRect(0, 0, a, l),
r = [
{ x: 0, y: 0.7 * l + d },
{ x: 0, y: 0.7 * l - d }
];
r[1].x < a + d;
)
y(r[0], r[1])
}
function y(t, e) {
o.beginPath(), o.moveTo(t.x, t.y), o.lineTo(e.x, e.y)
const n = e.x + (2 * m() - 0.25) * d,
i = b(e.y)
o.lineTo(n, i),
o.closePath(),
(h -= g / -50),
(o.fillStyle =
'#' +
(
((127 * f(h) + 128) << 16) |
((127 * f(h + g / 3) + 128) << 8) |
(127 * f(h + (g / 3) * 2) + 128)
).toString(16)),
o.fill(),
(r[0] = r[1]),
(r[1] = { x: n, y: i })
}
function b(t) {
return (s = t + (2 * m() - 1.1) * d), s > l || s < 0 ? b(t) : s
}
;(i.width = a * c),
(i.height = l * c),
o.scale(c, c),
(o.globalAlpha = e.a),
(i.style.cssText =
'opacity: ' +
e.a +
';position:fixed;top:0;left:0;z-index: ' +
e.z +
';width:100%;height:100%;pointer-events:none;'),
document.getElementsByTagName('body')[0].appendChild(i),
'false' !== e.c && ((document.onclick = x), (document.ontouchstart = x)),
x()
})()
}
|