<!DOCTYPE html><html><head><meta charset="UTF-8"><title>sin字体</title></head><body><svg xmls="http://www.w3.org/2000/svg" width="1000" height="1000"><defs><pattern id="grid" x="0" y="0" width="20" height="20" pattern="userSpaceOnUse"><path stroke="#ccc" fill="none" d="M0,0H20V20"></path></pattern></defs><rect width="1200" height="1000" fill="url(#grid)"></rect><text x="100" y="160" id="sintext">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text><path d="M100,0V200M0,160H200" stroke="red"></path></svg><script type="text/javascript">//y = a*sin(w*x+t)//x=[20,20,20....]var n = 26;var x = [];var y = null;var i = n;var s = 100;var w = 0.02;var t = 0;while(i--) x.push(20); function arrange1(t){ y= x.map(function(x){//map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组 return s * Math.sin( w * x + t ); }); }; 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; } } function render(){ sintext.setAttribute('dx', x.join(' '));//setAttribute()设置属性join()方法把数组中的所有元素放入一个字符串用" "分隔 sintext.setAttribute('dy', y.join(' ')); } function frame(){ t+=0.01; arrange(t); render(); requestAnimationFrame(frame); } frame();</script></body></html>
添加回答
举报
0/150
提交
取消