canvas画布上单行文本逐字输出

马黑黑

马黑黑

参考代码：（尺寸、文本等数据应根据需要调整）

1. <style>
   
2. #papa { margin: auto; width: 740px; height: 460px; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; position: relative; }
   
3. #canv { position: absolute; top: 100px; border: 1px solid;  }
   
4. </style>
   
5. 
   
6. <div id="papa">
   
7.         <canvas id="canv" width="700" height="200"></canvas>
   
8. </div>
   
9. 
   
10. <script>
    
11. 
    
12. (function() {
    
13.         let w = canv.width, h = canv.height;
    
14.         let ctx = canv.getContext('2d');
    
15.         let x = 10, y = 40, currentWidth, idx = 0;
    
16.         let outText = '欲把西湖比西子，淡妆浓抹总相宜。';
    
17. 
    
18.         ctx.font = 'bold 40px 黑体';
    
19.         ctx.fillStyle = '#ff0000';
    
20.         ctx.shadowOffsetX = 2;
    
21.         ctx.shadowOffsetY = 2;
    
22.         ctx.shadowBlur = 4;
    
23.         ctx.shadowColor = '#000';
    
24. 
    
25.         function drawText(text) {
    
26.                 ctx.clearRect(0, 0, w, h);
    
27.                 ctx.fillText(text,x,y);
    
28.                 ctx.fill();
    
29.         }
    
30. 
    
31.         (function updateText() {
    
32.                 let txtstr = outText.substring(0, idx);
    
33.                 drawText(txtstr);
    
34.                 idx ++;
    
35.                 if(idx > outText.length) idx = 0;
    
36.                 setTimeout(updateText, 400);
    
37.         })();
    
38. })();
    
39. 
    
40. </script>
    

复制代码

马黑黑

JS部分是一个匿名立即执行函数。函数中有两个子函数：

drawText(text) ：绘制文本的简单封装

function updateText() ：通过变更 字串索引变量 idx 来决定当前输出的文本流，原字串输出完毕从头再来。该函数自身也是立即执行函数，无需手动运行一次。

梦油

黑黑朋友的教授很有针对性和实用性。逐字输出就很实用。

樵歌

复制代码

樵歌

参考代码：（尺寸、文本等数据应根据需要调整） [color=rgb(0, 70, 41) !important]复制代码

樵歌

弄不出来，

马黑黑

梦油 发表于 2022-8-17 13:18
黑黑朋友的教授很有针对性和实用性。逐字输出就很实用。

逐字输出过去介绍过其他实现方式，这里是另一种

马黑黑

樵歌 发表于 2022-8-17 18:08
弄不出来，

需要耐心。先在本地测试最好，容易查看错在哪里

马黑黑

樵歌 发表于 2022-8-17 18:08
弄不出来，

不能再这里测试，因为我有演示，相同id的标签和JS代码会冲突。实际上，你的框跑到了最上方

红影

画布也能逐字输入，这个功能好棒

红影

可以多行输入么？如果是多行，一行之后再另起一行，代码将繁琐很多吧？

红影

黑黑可以像文字效果集中营一样，把画布也弄个集中营呢

马黑黑

红影 发表于 2022-8-17 19:47
黑黑可以像文字效果集中营一样，把画布也弄个集中营呢

这个算了

红影

马黑黑 发表于 2022-8-17 20:10
这个算了

看起来也很多呢，集中到一起不是更好

马黑黑

红影 发表于 2022-8-17 21:58
看起来也很多呢，集中到一起不是更好

怪麻烦的

红影

马黑黑 发表于 2022-8-17 22:39
怪麻烦的

用的人方便了啊

马黑黑

红影 发表于 2022-8-17 23:12
用的人方便了啊

找找就行，论坛的搜索功能挺不错。我的标题一般都有两个关键词：画布 canvas

梦油

马黑黑 发表于 2022-8-17 18:20
逐字输出过去介绍过其他实现方式，这里是另一种

好好好，你多教一些实用性强的有关知识，我想大家一定是十分欢迎的，只是你辛苦了。

马黑黑

梦油 发表于 2022-8-18 09:38
好好好，你多教一些实用性强的有关知识，我想大家一定是十分欢迎的，只是你辛苦了。