纯js 使用canvas制作数字滚动效果

最新推荐文章于 2024-07-25 11:38:39 发布

阿豪boy

最新推荐文章于 2024-07-25 11:38:39 发布

阅读量599

点赞数

文章标签： canvas js 算法 javascript python

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064780

版权

原文链接: 纯js 使用canvas制作数字滚动效果

上一篇: 从此困于生活

下一篇: 使用canvas做纯色或渐变色图片优化 img图片拉伸

mac 上有啥好用的gif截图软件吗? kap不知道为啥后面有个黑点....

因为都在一个文件里, 代码比较长

两种移动的思想有所不同

单个数字移动, 从一个数字移动到一个数字, 每次加一, 时间比较长, 从0-->1000, 就需要1000次

全部同时移动, 最终停留在指定的数字上面, 随机绘制, 移动所有位置, 但是每个位置的速度不一样, 高位的慢一点, 0-->1000 是可以控制时长的, 只要最后数字正确就行

基本上就是使用canvas,根据不同的进度, 将数字绘制在不同的位置, 使用了raf和promise, 如果后面需要拆出去的话, 也会比较方便一点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

  </head>
  <body>
    <!-- 两种移动, 一种单个移动, 一种全部移动