svg波浪形文字

最新推荐文章于 2022-12-20 14:28:21 发布

何烨坪Echo

最新推荐文章于 2022-12-20 14:28:21 发布

阅读量1.6k

点赞数

分类专栏： WEB前端文章标签： svg

本文链接：https://blog.csdn.net/heye13/article/details/46406153

版权

WEB前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>

<svg xmlns="http;//www.w3.org/2000/svg" width="800" height="600">
<defs>
<pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<path stroke="#F0F0F0" fill="none" d="M 0 0,H 20,V 20"></path>
</pattern>
</defs>
<rect width="1200" height="1000" fill="url(#grid)"></rect>

<text id="sintext" x='100' y='220' style="font-size:14px;font-family:'Arial';">
</text>
<path d="M 100 0,V 200,M 0 160,H 200" transform="translate(0,60)" stroke="red"></path>
</svg>
<script type="text/javascript">
var text = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var n = text.length;
var x = [];
var i = n;
var y = null;
var s = 100,w = 0.02,t = 0;
while(i--){
x.push(10);
var tspan = document.createElementNS('http://www.w3.org/2000/svg','tspan');
tspan.textContent = text[n - i - 1];
sintext.appendChild(tspan);
var h = Math.round(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);
}
arrange(0);
render();
frame();
</script>
</body>
</html>