SVG-利用 dy 属性实现波浪文字效果

问答
评论
笔记
资料下载

全部精华我要发布

本节源码，拿走不谢。

最新回答 / Nice_lq

我偏要谢，蟹蟹?

3 回答 988 浏览

2022-04-18

chrome浏览器下后台疯狂报错，火狐下则正常。求大神指点。

最新回答 / Nice_lq

现在就可以了

1 回答 1439 浏览

2021-04-26

代码是用什么软件打开的

最新回答 / 慕粉3478004

Sublime Text

1 回答 1806 浏览

2018-01-18

老师，请问正弦函数那块，ly=0,cy;还有往后的cy-ly. 是什么意思啊

最新回答 / qq_冰诺_0

<...图片...>还有字数限制

1 回答 1671 浏览

2017-09-07

用sintext之前没有获取sintext?！

已采纳回答 / 慕用8116058

<...code...>把这段代码复制运行一下，发现div1即为div元素，说明如果没有变量名没有指定，那么浏览器会自动得到id为该名称的元素。这里sintext是元素的id，所以变量sintext会指向该元素。大概的意思就是这样的，js的犀牛书里有说到，我没看过这书，但是你可以试一下。

1 回答 1509 浏览

2016-12-16

怎么不出效果

最新回答 / 慕移动9181930

?我也是这问题??怎么解决的大神确实啊  用户体验更好啊   怎么会是更差呢 

2 回答 986 浏览

2022-03-27

视频里面的w是怎么得来的

最新回答 / qq_曼卿_0

我看了一部分视频你说的w 是sin(wx + p) 吗这是数学常识

1 回答 1044 浏览

2016-10-16

有个小疑问，关于text【】

已采纳回答 / Jason333

字符串和一维字符数组一样

1 回答 1587 浏览

2016-08-23

都不解释直接跳过能不能重录解释啊老师

讲师回答 / techird

您好，请问是哪部分讲的不够清楚？

2 回答 1516 浏览

2022-09-08

text[n - i - 1]

+ 我来回答回答最高可+2积分

3 回答 1003 浏览

2022-07-03

老师没有给出代码我在这里贴一下（代码需要优化，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>

+ 我来回答回答最高可+2积分

6 回答 1381 浏览

2022-07-05

全部我要发布

最热最新

只看我的

5. SVG 文本立即下载

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

下一节课程： SVG-垂直居中问题 (08:44) 下一节重新观看

为你推荐

讲师课程

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～