马黑黑 发表于 2022-8-17 13:01

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

<style>
#papa { margin: auto; width: 740px; height: 460px; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; top: 100px; border: 1px solid;}
</style>

<div id="papa">
        <canvas id="canv" width="700" height="200"></canvas>
</div>

<script>

(function() {
        let w = canv.width, h = canv.height;
        let ctx = canv.getContext('2d');
        let x = 10, y = 40, currentWidth, idx = 0;
        let outText = '欲把西湖比西子，淡妆浓抹总相宜。';

        ctx.font = 'bold 40px 黑体';
        ctx.fillStyle = '#ff0000';
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.shadowBlur = 4;
        ctx.shadowColor = '#000';

        function drawText(text) {
                ctx.clearRect(0, 0, w, h);
                ctx.fillText(text,x,y);
                ctx.fill();
        }

        (function updateText() {
                let txtstr = outText.substring(0, idx);
                drawText(txtstr);
                idx ++;
                if(idx > outText.length) idx = 0;
                setTimeout(updateText, 400);
        })();
})();

</script>

马黑黑 发表于 2022-8-17 13:02

参考代码：（尺寸、文本等数据应根据需要调整）
<style>
#papa { margin: auto; width: 740px; height: 460px; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; top: 100px; border: 1px solid;}
</style>

<div id="papa">
        <canvas id="canv" width="700" height="200"></canvas>
</div>

<script>

(function() {
        let w = canv.width, h = canv.height;
        let ctx = canv.getContext('2d');
        let x = 10, y = 40, currentWidth, idx = 0;
        let outText = '欲把西湖比西子，淡妆浓抹总相宜。';

        ctx.font = 'bold 40px 黑体';
        ctx.fillStyle = '#ff0000';
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.shadowBlur = 4;
        ctx.shadowColor = '#000';

        function drawText(text) {
                ctx.clearRect(0, 0, w, h);
                ctx.fillText(text,x,y);
                ctx.fill();
        }

        (function updateText() {
                let txtstr = outText.substring(0, idx);
                drawText(txtstr);
                idx ++;
                if(idx > outText.length) idx = 0;
                setTimeout(updateText, 400);
        })();
})();

</script>


马黑黑 发表于 2022-8-17 13:07

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

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

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

梦油 发表于 2022-8-17 13:18

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

樵歌 发表于 2022-8-17 18:05

<style>
#papa { margin: auto; width: 740px; height: 460px; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; top: 100px; border: 1px solid;}
</style>

<div id="papa">
      <canvas id="canv" width="700" height="200"></canvas>
</div>

<script>

(function() {
      let w = canv.width, h = canv.height;
      let ctx = canv.getContext('2d');
      let x = 10, y = 40, currentWidth, idx = 0;
      let outText = '夜雨朝霁洗绿尘，茂林修竹野无尘。';

      ctx.font = 'bold 40px 黑体';
      ctx.fillStyle = '#ff0000';
      ctx.shadowOffsetX = 2;
      ctx.shadowOffsetY = 2;
      ctx.shadowBlur = 4;
      ctx.shadowColor = '#000';

      function drawText(text) {
                ctx.clearRect(0, 0, w, h);
                ctx.fillText(text,x,y);
                ctx.fill();
      }

      (function updateText() {
                let txtstr = outText.substring(0, idx);
                drawText(txtstr);
                idx ++;
                if(idx > outText.length) idx = 0;
                setTimeout(updateText, 400);
      })();
})();

</script>
复制代码

樵歌 发表于 2022-8-17 18:07


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

[*]<style>
[*]#papa { margin: auto; width: 740px; height: 460px; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; position: relative; }
[*]#canv { position: absolute; top: 100px; border: 1px solid;}
[*]</style>
[*]
[*]<div id="papa">
[*]      <canvas id="canv" width="700" height="200"></canvas>
[*]</div>
[*]
[*]<script>
[*]
[*](function() {
[*]      let w = canv.width, h = canv.height;
[*]      let ctx = canv.getContext('2d');
[*]      let x = 10, y = 40, currentWidth, idx = 0;
[*]      let outText = '夜雨朝霁洗绿尘，茂林修竹野无尘。';
[*]
[*]      ctx.font = 'bold 40px 黑体';
[*]      ctx.fillStyle = '#ff0000';
[*]      ctx.shadowOffsetX = 2;
[*]      ctx.shadowOffsetY = 2;
[*]      ctx.shadowBlur = 4;
[*]      ctx.shadowColor = '#000';
[*]
[*]      function drawText(text) {
[*]                ctx.clearRect(0, 0, w, h);
[*]                ctx.fillText(text,x,y);
[*]                ctx.fill();
[*]      }
[*]
[*]      (function updateText() {
[*]                let txtstr = outText.substring(0, idx);
[*]                drawText(txtstr);
[*]                idx ++;
[*]                if(idx > outText.length) idx = 0;
[*]                setTimeout(updateText, 400);
[*]      })();
[*]})();
[*]
[*]</script>
[*]

复制代码


樵歌 发表于 2022-8-17 18:08

弄不出来，{:4_198:}

马黑黑 发表于 2022-8-17 18:20

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

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

马黑黑 发表于 2022-8-17 18:21

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

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

马黑黑 发表于 2022-8-17 19:11

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

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

红影 发表于 2022-8-17 19:45

画布也能逐字输入，这个功能好棒{:4_199:}

红影 发表于 2022-8-17 19:47

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

红影 发表于 2022-8-17 19:47

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

马黑黑 发表于 2022-8-17 20:10

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

这个算了

红影 发表于 2022-8-17 21:58

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

看起来也很多呢，集中到一起不是更好{:4_187:}

马黑黑 发表于 2022-8-17 22:39

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

怪麻烦的

红影 发表于 2022-8-17 23:12

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

用的人方便了啊{:4_173:}

马黑黑 发表于 2022-8-17 23:14

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

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

梦油 发表于 2022-8-18 09:38

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

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

马黑黑 发表于 2022-8-18 12:21

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

{:4_190:}
页: [1] 2
查看完整版本: canvas画布上单行文本逐字输出