canvas画布之文本走马灯

马黑黑

编写了一个函数，画布上的文本自右向左循环运动。为便于观察，画布设置了边框：

<style>        #papa { margin: auto; width: 720px; height: 460px; position: relative; }
        #canv { position: absolute; left: 20px; top: 20px; border: 1px solid; }
</style>

<div id="papa">
        <canvas id="canv" width="400" height="70"></canvas>
</div>

<script>
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let step = 1, xx = w;
let txtstr = '东风夜放花千树';

(function moveText() {
        ctx.clearRect(0, 0, w, h);
        ctx.strokeStyle = 'hsl(20, 100%, 50%)';
        ctx.font = 'bold 50px 黑体';
        ctx.strokeText(txtstr, xx, 50);
        xx -= step;
        if (xx <= -(txtstr.length * 50)) xx= w;
        requestAnimationFrame(moveText);
})();
</script>


效果看下楼。

马黑黑

马黑黑

js代码中，变量 step 是移动的速度，取值可以是整数、浮点数，比如想慢一点，0.8也是可以的。

如果需要实心子，请用 fillText 替代 strokeText、fillStyle 替代 strokeStyle。

如果想加文本阴影，建议使用 fillText 方法，然后紧跟在字体设置那行之后加入如下代码：

        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.shadowBlur = 4;
        ctx.shadowColor = '#000';

马黑黑

如果需要其它运动方向，修改函数的条件语句即可

红影

这个走马灯也好看。原来空心字是这么来的

红影

如果弄多行的怎么弄？如这样的诗句向上移动

荆溪白石出，
天寒红叶稀。
山路元无雨，
空翠湿人衣。

马黑黑

红影 发表于 2022-8-16 16:55
如果弄多行的怎么弄？如这样的诗句向上移动

荆溪白石出，

这个也可以弄的，要复杂一点

马黑黑

醉美水芙蓉 发表于 2022-8-16 19:58
欣赏黑黑老师带来的文字特效！

小辣椒

黑黑分享辛苦

马黑黑

小辣椒 发表于 2022-8-16 21:19
黑黑分享辛苦

这个效果是不丢帧的，比你爱用的marquee还好

小辣椒

马黑黑 发表于 2022-8-16 21:23
这个效果是不丢帧的，比你爱用的marquee还好

感觉你是新东东层出不穷，俺是一下子吃成胖子了。。。。

马黑黑

小辣椒 发表于 2022-8-16 21:25
感觉你是新东东层出不穷，俺是一下子吃成胖子了。。。。

胖了好，肉嘟嘟的人见人爱

红影

马黑黑 发表于 2022-8-16 19:09
这个也可以弄的，要复杂一点

看到了黑黑弄的，太厉害了

马黑黑

红影 发表于 2022-8-17 20:42
看到了黑黑弄的，太厉害了

一般般

红影

马黑黑 发表于 2022-8-17 20:48
一般般

更喜欢多行的那个

马黑黑

红影 发表于 2022-8-17 22:04
更喜欢多行的那个

不同场景，不同用处

红影

马黑黑 发表于 2022-8-17 22:37
不同场景，不同用处

也是哦，单行的可用的地方也挺多的呢。

马黑黑

红影 发表于 2022-8-17 23:10
也是哦，单行的可用的地方也挺多的呢。

而且，理解了单行的实现方式，是理解多行的基础

红影

马黑黑 发表于 2022-8-17 23:13
而且，理解了单行的实现方式，是理解多行的基础

是的，可以比较中学习