老師沒有給出代碼? 我在這里貼一下（代碼需要優化，console.table(y)會被很快的執行很多次，資源也沒有及時釋放）
<!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>
<!--?pattern?筆刷?-->
<svg?xmlns="http;//www.w3.org/2000/svg"?width="100%"?height="100%">
????<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='160'?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>
2017-11-25
感謝，省去好多時間~
2015-12-05
雖然沒弄明白，非常感謝！
2015-07-30
謝謝分享
2015-07-01
謝謝！