<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="900px"> <defs> <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <path stroke="#f0f0f0" fill="none" d="M0,0H20V20"></path> </pattern> </defs> <rect width="1200" height="1000" fill="url(#grid)"></rect> <text id="sintext" x="100" y="160" style="font-size: 14px;font-family:‘Arial‘"></text> </svg><script> var NS = ‘http://www.w3.org/2000/svg‘; var text = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ‘; var n = text.length; var x = []; var y = null; var i = n; var s = 100; var w = 0.02; var t = 0;
while(i--) { x.push(10); var tspan = document.createElementNS(NS,‘tspan‘); tspan.textContent = text[n - i - 1]; sintext.appendChild(tspan); var h = Math.round(360/26*i); //色环360度放到26个字母上，i当前字母 tspan.setAttribute(‘fill‘,‘hsl(‘+h+‘,100%,80%)‘); }; function arrange(t){ y = []; var ly = 0,cy; for (i=0;i<n;++i){ cy = -s * Math.sin(w * i * 20 + t); y.push(cy-ly); ly = cy; } console.table(y); } function render(){ sintext.setAttribute(‘dx‘, x.join(‘ ‘)); sintext.setAttribute(‘dy‘, y.join(‘ ‘)); } function frame(){ t += 0.01; arrange(t); render(); requestAnimationFrame(frame); } frame();</script></body></html>
时间： 2024-11-04 15:43:39