论坛 › 马黑黑教程专版 › canvas画布之文本走马灯

马黑黑 发表于 2022-8-16 13:09

canvas画布之文本走马灯

本帖最后由 马黑黑 于 2022-8-16 13:12 编辑

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

<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>


效果看下楼。

马黑黑 发表于 2022-8-16 13:09

本帖最后由 马黑黑 于 2022-8-16 13:12 编辑 <br /><br /><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>

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

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

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

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

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

马黑黑 发表于 2022-8-16 13:18

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

红影 发表于 2022-8-16 16:54

这个走马灯也好看。原来空心字是这么来的{:4_173:}

红影 发表于 2022-8-16 16:55

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

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

马黑黑 发表于 2022-8-16 19:09

本帖最后由 马黑黑 于 2022-8-16 19:12 编辑

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

荆溪白石出，

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

醉美水芙蓉 发表于 2022-8-16 19:58

马黑黑 发表于 2022-8-16 19:58

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

{:4_190:}

小辣椒 发表于 2022-8-16 21:19

黑黑分享辛苦{:4_187:}

马黑黑 发表于 2022-8-16 21:23

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

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

小辣椒 发表于 2022-8-16 21:25

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

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

马黑黑 发表于 2022-8-16 21:25

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

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

红影 发表于 2022-8-17 20:42

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

看到了黑黑弄的，太厉害了{:4_187:}

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

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

一般般

红影 发表于 2022-8-17 22:04

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

更喜欢多行的那个{:4_187:}

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

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

不同场景，不同用处

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

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

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

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

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

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

红影 发表于 2022-8-18 21:05

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

是的，可以比较中学习{:4_204:}

查看完整版本: canvas画布之文本走马灯