本节源码，拿走不谢。-慕课网

本节源码，拿走不谢。

来源：5-2 SVG-利用 dy 属性实现波浪文字效果

慕移动7441361

2019-04-25 11:08

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>svg</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
        <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'">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
        <path d="M100,0 V200M0,100H200" transform="translate(0,60)" stroke="red"></path>
    </svg>
    <script>
        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(10);
        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(' '));
            sintext.setAttribute('dy',y.join(' '));
        }
        function frame(){
            t+=0.02;
            arrange(t);
            render();
            requestAnimationFrame(frame);
        };
        frame()
    </script>
</body>
</html>

写回答关注